Server Components vs. Client Components in Next.js

The biggest shift in modern Next.js is deciding where a component runs. Defaulting to the server shrinks the JavaScript your users download.

When to stay on the server

Rendering static content, reading data, and using secrets belongs on the server. Server components render once and ship minimal JavaScript.

When to go interactive

State, effects, event handlers, and browser APIs need the client. Mark these files or boundaries with the client directive.

Composing the two

You can pass server components as children into client components, keeping the heavy interactive shell small while the content stays on the server.

Wrapping up

Choose by capability, not habit. Start server-first and sprinkle in client interactivity only where the experience requires it.