React Server Components
React Server Components (RSC) run only on the server and send serialized UI (not HTML) to the client. They can directly access databases, file systems, and server APIs. They have zero impact on the client JavaScript bundle size.
Server Components are the kitchen staff at a restaurant — they prep the ingredients (data) and plate the food (layout) but never come to the dining room (client). The waiters (Client Components) handle the customer interaction.
Components are server by default in frameworks like Next.js App Router. Add 'use client' at the top of a file to make it a Client Component. Server Components can render Client Components, but Client Components cannot import Server Components (they can receive them as children/props though). RSC output is a React-specific wire format (not HTML) that supports streaming and preserves client component state during navigation.
The RSC wire format is a JSON-like streaming protocol where each line represents a chunk of the UI tree, including references to client component bundles. Client components in the payload are represented as module references that the client runtime resolves and hydrates. This enables partial hydration — only interactive (client) components ship JavaScript. Server Components can use async/await directly at the component level: async function Page() { const data = await db.query(...); return <List data={data} />; }. The mental model: Server Components are the 'data fetching and layout layer', Client Components are the 'interactivity layer'.
Server Components run exclusively on the server, directly access backend resources, and add zero bytes to the client bundle. They send a streaming wire format, not HTML, which preserves client component state during navigation. The boundary is 'use client' — server components handle data and layout, client components handle interactivity. Server components can render client components, but not vice versa for imports.
Thinking Server Components are the same as SSR. SSR renders the entire tree to HTML on the server then hydrates everything on the client. RSC runs specific components on the server permanently — they never hydrate, never ship JS, and can be re-fetched without losing client state.