#react-lazy

Next.js의 Suspense VS dynamic

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#nextdynamic Lazy Loading을 사용하기 위해서 Next.js에서는 2가지의 방법을 제공하고있습니다. 1. dynamic 2. React.lazy + Suspense 또한, Next 의 Streaming 관련글을 읽다 보니 https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example 예제에서는 Suspense를 사용한 예제를 보여주는데 위의 예제에서는 dynamic을 사용하지 않고 Suspense를 사용한 이유가 궁금합니다. 처음 링크된 글을 읽었을때는 dynamic 함수가 React.lazy + suspense를 구현함 과 동시에 여러 옵션들을 제공하고 있어서 dynamic 함수가 더 좋다(?) 라고 생각을 하게 되었는데, dynamic과 suspense의 정확한 차이점이 궁금합니다.

React lazy에 대해 질문드려요

안녕하세요 프론트엔드를 공부하고 있는 초보 개발자입니다 제 사이드 프로젝트 App.js에는 총 13개의 페이지를 Routes안에서 처리해주고 있습니다 리엑트 공식문서를 보고 따라해봤는데 콘솔 네트워크 탭에서 봐도 초기 로딩속도는 약 2.2~2.6초 였습니다. 이걸 전부 lazy로 바꾸니 확실히 1.3~1.47초가 나오더라구요 여기서 궁금한 점이 있습니다 1. 초기 로딩 속도를 줄이긴했는데 더 많은걸 request하고 있더라구요 lazy 전에는 네트워크 요청 쿼리랑 이미지 리소스가 떴다고 하면 lazy 후에는 뭔가 그 패키지들의 이름이 쫘르륵 나오면서 17개 였던게 27개가 됐어요 근데 속도는 더 잘나와요 이게 맞는건가요 ? 2 . 메인페이지에서 굳이 상세 페이지나 다른 페이지를 초기에 받아오지않아서 초기 로딩 속도를 줄여주는건 알았는데 반대로 사용자가 다른 페이지에 갈때마다 그 페이지를 다시 받아와야하는걸로 알고 있습니다 그 부분은 로딩 스피너로 구현을 해놨는데 프로젝트 규모에 따라서 lazy를 해주고 안해주고의 차이인가요?

Webpack bundle 작업이 그냥 react client server에 영향을 미치는건가요?

현재 최적화를 경험해보고자 기존 react 프로젝트를 webpack 5와 함께 splitting 작업을 진행하고 있습니다. 여기서 드는 궁금증이 webpack dev server로 서버를 키지 않고 일반 react-scripts start 로 서버를 켜도 webpack으로 진행한 최적화 등이 반영이 되는걸까요? LightHouse로 확인했을 시에 bundle파일의 용량이 줄어있어서 점수가 10점가량 올라간 것을 확인했습니다. (참고로 react.lazy 또한 반영을 했습니다.)

다크모드에서 react lazy 사용할 때 흰 화면이 보이는 이슈

react lazy를 route 단에서 적용을 했는데 페이지를 이동할 때마다 흰색화면이 나옵니다. 라이트 모드에서는 괜찮은데 다크모드를 사용 중일 때는 route를 이동할 때마다 흰배경이 나와서 불편하더라구요. 혹시 이런 부분은 어떻게 처리하는 것이 좋을까요?

react.lazy 사용해서 코드 스플리팅할 대상 정하는 기준이 있나요?

React.lazy 와 Suspense로 코드 스플릿팅을 하려고 하는데 쪼개는 대상 정하는 기준이 뭘까여 ㅠㅠ