Server vs Client Components

The New Paradigm

Next.js App Router introduces React Server Components (RSC) as the default. Components run on the server, reducing JavaScript sent to the browser.

Server Components

Server components can directly access databases, file systems, and environment variables. They do not have event handlers or state. They render on the server and send HTML to the client.

Client Components

Add "use client" at the top of a file to make it a client component. Client components support interactivity, state, and browser APIs. They still render initially on the server (SSR) but hydrate in the browser.

Composing Them

You can import server components into client components but not vice versa. Use component composition strategically to minimize the client bundle.