- Designed for SSR and SSG: Next.js's
dynamic
function 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 the loading
option in the dynamic
function, not with Suspense
.
- SSR Control: One of the key advantages of Next.js's
dynamic
import 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
dynamic
import does not require Suspense
to work. It's built to handle the loading state internally and works out of the box with Next.js's SSR and SSG capabilities.
const DynamicHeader = dynamic(() => import('../components/header'), {
ssr: false,
})