Understanding React Server Components

React Server Components let parts of an application render on the server without sending their implementation to the browser. In a Next.js App Router project, components are server components by default.

Why server components matter

Less JavaScript in the browser can improve startup time and reduce the amount of work required on slower devices. Server components can also read data directly from a database or the file system without exposing those details to users.

They are especially useful for pages that display content, lists, or data fetched from an API. The component can wait for the data on the server and return the finished UI to the browser.

When to use a client component

Interactive features still belong in client components. A component needs the "use client" directive when it uses state, effects, event handlers, or browser APIs such as localStorage.

The best approach is to keep the client boundary small. A server-rendered page can include a small interactive form or menu, allowing the rest of the page to remain simple and efficient.

A practical rule

Start with a server component and add a client component only when the browser needs to respond to user interaction. This keeps data fetching close to the page that needs it and makes the client-side JavaScript easier to understand.