Seonglae Cho- Designed for SSR and SSG: Next.js's
dynamicfunction is specifically designed to work seamlessly with both server-side rendering and static site generation. It enables code-splitting and lazy loading in a way that's compatible with Next.js's pre-rendering features.
- Custom Loading Components: Like
React.lazy, you can specify a loading component that will be displayed while the dynamic component is being loaded. However, it's done through theloadingoption in thedynamicfunction, not withSuspense.
- SSR Control: One of the key advantages of Next.js's
dynamicimport is the ability to control whether a component is imported dynamically only on the client side or if it should be pre-rendered on the server. This is particularly useful for optimizing performance and ensuring compatibility with SSR and SSG.
- No Need for Suspense: Next.js's
dynamicimport does not requireSuspenseto work. It's built to handle the loading state internally and works out of the box with Next.js's SSR and SSG capabilities.
Advanced Features: Dynamic Import | Next.js
Dynamically import JavaScript modules and React Components and split your code into manageable chunks.
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
dynamic import로 줄여본 next.js 앱의 최초 로딩 시간
2020-05-10 · 4 min to read Next.js는 ES2020의 dynamic import 문법을 지원한다. dynamic import를 사용하면 모듈을 빌드 타임이 아닌 런타임에 불러오도록 한다. 이를 통해 번들 파일을 분리하고 퍼포먼스 향상을 기대할 수 있다. 앱에는 초기 로딩부터 사용하지 않는 부분이 존재할 수 있으며, 또 그 부분의 사이즈가 생각보다 클 수 있기 때문이다.
https://blog.rhostem.com/posts/2020-05-10-nextjs-and-dynamic-import
