Back to notes

Keeping Server and Client boundaries intentional

A few questions that help decide when a Next.js component really needs to run in the browser.

Next.jsReactPerformance

Client Components are useful, but they are not the default shape of a modern App Router application. The boundary should follow behavior, not habit.

Ask what the component needs

State, event handlers, browser APIs, and client-only libraries are strong reasons to move a small component to the client. Static content, data reads, and layout usually belong on the server.

  • Keep page composition on the server.
  • Move only the interactive control to the client.
  • Pass serializable data across the boundary.
  • Check the browser bundle when a dependency changes.

The payoff is clarity

An intentional boundary makes performance easier to reason about and makes the codebase easier for the next person to change.

Keep building useful things.