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

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

from stackflow.

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

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

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

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

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

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

from stackflow.

• 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 서버를 만들어 운영하고 있습니다. 고려해보시면 좋겠습니다.

from stackflow.

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

from stackflow.