Dynamic import and SSR: what happens

A dynamic import in Next.js splits the bundle, not the rendering: the component ships in a separate chunk but the server still renders it. Only ssr: false changes that, and in the App Router the option comes with a constraint.

What next/dynamic does

next/dynamic wraps React.lazy plus Suspense. The module travels in its own chunk and hydrates when needed, but the HTML of the first request already holds the markup, unless you turn server rendering off.

// app/(marketing)/page.tsx
import dynamic from "next/dynamic";

const Chart = dynamic(() => import("@/components/app/revenue-chart"), {
  loading: () => ,
});

export default function Page() {
  return ;
}

The ssr: false constraint

In the App Router ssr: false is not allowed in a server component: the build stops with an explicit error. Move the call into a file with "use client" and the constraint disappears.

"use client";

import dynamic from "next/dynamic";

const MapPanel = dynamic(() => import("./map-panel"), { ssr: false });

export function MapShell() {
  return ;
}

When it is actually needed

• Libraries that read window on first import: maps, editors, canvas.
• Heavy widgets below the fold, that nobody sees before the first scroll.
• Components with large dependencies and rare use, such as a code editor.
• It is not for a 2 KB component: the extra chunk costs a request.

The cost you do not see

With ssr: false the first paint shows the fallback. If the fallback is not as tall as the content, the page jumps: reserve the space with min-height or a skeleton of the same size.

For the fallback the catalogue has skeletons; for heavy widgets there are charts and editors.

The cost of a library is in the bundle size of a UI library; load order in preload, prefetch and priority; waiting in streaming and Suspense. Comparison: Next.js vs Vite for a marketing site.

npx next build

Known limitation: ssr: false moves the component to the client, so that content is missing from the first HTML and cannot read server data. If it must be indexed, keep it on the server.