Next.js 12에서 사용했을 때 dynamic import 시 화면전환 애니메이션 이슈

[hayoung474]

안녕하세요! 현재 훌륭하게 만들어주신 stackflow를 next.js 12 환경에서 적용하려 하고 있습니다.

정확하게는next.js 12 웹뷰 환경에서 개발 중입니다.

깃헙에 올려주신 next.js 예제를 참고하였는데

이슈 상황

dynamic import 하여 빌드 시 번들 사이즈를 줄인 것 같아 동일하게 시도하였으나 예제 결과물과는 다르게 화면 전환 애니메이션이 적용되지 않았습니다. 한 번 접근하고 나면 애니메이션이 보이기 시작했습니다.

원인 추측

dynamic import를 하였기 때문에 이동하고자 하는 다음 화면이 로드되지 않았다면 애니메이션이 보이지 않는게 당연한 현상이라고 생각했는데 .. 올려주신 에제에서는 dynamic import 해도 화면전환 애니메이션이 보여져서

질문

혹시 dynamic import를 하면서도 화면전환을 하려면 어떻게 해야 하나요? 제가 무엇을 놓치고 있을까요 ?

감사합니다! 😃

[tonyfromundefined]

안녕하세요! Stackflow에 관심 가져주셔서 감사합니다. 혹시 재현 가능한 경로를 알려주시면 적절한 해결 방법을 가이드해드리도록 하겠습니다. 만약 Private Repo이고, 재현이 힘들다면 저를 Outside Collaborator로 등록해주셔도 됩니다. 감사합니다.

[hayoung474]

빠른 확인 너무 감사합니다 토니님!

아쉽게도 사내 망에서만 접근 가능한 bitbucket이라 완전히 같은 상황을 재현하기는 어려울 것 같습니다 ㅠㅠ

이슈를 올린 후 , 몇가지 상황을 더 테스트 해보았는데, 찜찜한 상황 몇가지를 발견하였습니다.

1. 내부에서 렌더링하고자 하는 컴포넌트는 react-query 의존성이 있습니다.
2. react-query와 관련없이 아무 내용없는 빈 화면을 렌더링 했을 경우 애니메이션이 보이다가 안보이다가 합니다.
3. ngrok으로 웹뷰 환경에서 테스트 했을 때는 애니메이션이 보이지 않습니다. ngrok은 region이 japan입니다 .. (한국이 없더라고요 ..)
4. 위 상황과 반대로, localhost로 브라우저 환경에서 테스트 하면 애니메이션이 보입니다.
5. 빌드한 후 서버에 배포하여 확인해보면 애니메이션이 잘 나옵니다 ..

빌드 한 후 애니메이션이 보이는 것과 , 애니메이션이 보이다가 안보이다가 하는 것은 네트워크 속도가 영향이 있을까요?

아직 주니어라 .. 고려하지 못하는 범위가 있을 수 있습니다. 감사합니다 !!

[tonyfromundefined]

• React.lazy()를 쓰신다면, Suspense 관련된 이슈가 있을 수 있어보입니다. React 18을 사용중이신지 확인 부탁드립니다.
• 만약 그래도 계속 발생한다면, 안쪽에서 React.lazy를 사용하고, 로딩 스피너를 Suspense로 띄우는 방식을 제안드립니다.

<AppScreen>
  <Suspense fallback={...}>
    <MyLazyComponent />
  </Suspense>
</AppScreen>

---

(참고) Stackflow를 Next.js와 같은 라우터 기능이 포함된 프레임워크와 함께 사용하는 경우 복잡도가 높아 관리/운영하기 힘든 이슈가 있을 수 있습니다. (라우팅 기능이 Next.js와 Stackflow 이중으로 관리가 필요)

현재 당근 내에서는 SSR이 필요한 경우 Vite SSR 기능을 활용해 자체적으로 Node.js 서버를 만들어 운영하고 있습니다. 고려해보시면 좋겠습니다.

[hayoung474]

감사합니다! 안쪽에서 suspense를 사용하는 것도 방법이겠네요 ! 이슈를 닫겠습니다 !