React Server Components (RSC)

A React Server Component executes only in the server environment, whenever its output is asked for: at build time, per request, or again on a later server render. It sends a description of its output to the browser, and its own implementation never enters the client bundle. That means it can be an async function that awaits your database, reads a secret, or imports a 300kb markdown parser, and your users download none of it. In the Next.js App Router every component is one of these by default.

The trade is that server components have no state, no effects, and no event handlers, because there is no browser runtime behind them. Interactivity lives in client components, marked with the 'use client' directive at the top of the file. The working pattern is a server shell that fetches data, with small client leaves for the parts that actually need to click, type, or animate.

Two traps. First, 'use client' is a boundary, not a label: every module imported below it also ships to the browser, so one directive in a layout can drag your whole tree client-side. Second, props crossing the boundary must be serializable. Plain objects, arrays, dates, Maps, and promises make it across fine; functions and arbitrary class instances (an ORM model row, a database client) do not, so pass the fields you need instead of the object. Pass children through instead of importing server components into client ones.