Browser-only packages

Keep window-reading and native packages out of the server bundle.

Next.js docsnextjs.org
Analyze bundle size with the built-in analyzer (Next.js 16.1+).
Guides · Package bundlingOpen guide ↗

From next-best-practices, bundling.md.

Server-render a chart library

Press Render request, then switch the settings.

Library reads window
Fix
import in page.tsxBad
  1. Server render
  2. HTML sent
  3. Chart mounted
/dashboard

500 · Internal Server Error

Revenue

Idle

Server HTML—
dynamic, ssr: falseGood
  1. Server render
  2. HTML sent
  3. Chart mounted
/dashboard

500 · Internal Server Error

Revenue

Idle

Server HTML—

Route each package to a bundle

Pick a package.

No configBad
Issue—
With the fixGood

Fix—

Match an error to its fix

Paste an error, or load an example.

Waiting for an error

Why it matters, pros and cons

Why it matters

The server render runs in Node, with no window. Fix the import, not the check.

Pros

  • Only the widget waits for the client.
  • ssr: false gets its own chunk.
  • Both config keys work under Turbopack.

Cons

  • ssr: false content is missing from server HTML.
  • Without a sized loading(), the page shifts.
  • External packages must be installed on the server.