Q22: How does next/dynamic perform code splitting in the Pages Router?
next/dynamic wraps standard import() calls to lazy-load React components, splitting them into separate JS chunks. Setting { ssr: false } skips server-side rendering for browser-only libraries.
Lazy Loading Component with next/dynamic
import dynamic from 'next/dynamic';
const HeavyChart = dynamic(() => import('../components/HeavyChart'), {
ssr: false,
loading: () => <p>Loading Chart...</p>,
});
export default function Dashboard() {
return <HeavyChart />;
}💡 HeavyChart is split into an independent JS chunk and rendered exclusively on the client.
Key Takeaways
- Reduces initial bundle size by lazy-loading components on demand.
- Use
{ ssr: false }for browser-dependent modules.
Knowledge Check
What parameter setting in next/dynamic prevents a heavy client chart library from rendering on Node.js servers?