Q25: How does next/dynamic perform code splitting and disable SSR for client libraries?
next/dynamic is an extension of React.lazy(). It lazy-loads heavy client-side libraries or components on demand. Setting { ssr: false } completely disables server-side pre-rendering for browser-only libraries (e.g., Chart.js or Leaflet maps).
Disabling SSR for Browser-Only Library
import dynamic from 'next/dynamic';
// Loads Leaflet Map component on client side only
const MapComponent = dynamic(() => import('./MapComponent'), {
ssr: false,
loading: () => <p>Loading Map...</p>,
});
export default function Page() {
return <MapComponent />;
}💡 ssr: false prevents Leaflet from executing on Node.js servers where window/document is undefined.
Key Takeaways
- Splits heavy JS components into separate lazily loaded bundle chunks.
{ ssr: false }prevents server rendering failures for window-dependent client libraries.
Knowledge Check
Why should you pass { ssr: false } to next/dynamic when importing a canvas charting library?