What they are
React Server Components (RSC) render exclusively on the server. They never ship to the browser as JavaScript, so heavy dependencies like markdown parsers or database clients stay off the client bundle.
How they differ from client components
- A Server Component runs once on the server and emits a serialized description of UI.
- A Client Component, marked with use client, hydrates and runs in the browser for interactivity.
- Server Components can directly await data and read secrets like API keys because that code never reaches the user.
The boundary
You compose them in a tree. A Server Component can render a Client Component, but not the reverse for module imports. Props passed across the boundary must be serializable — no functions or class instances.
Why it matters
Moving rendering to the server shrinks the client bundle and removes round trips, since data fetching happens close to the source. The result is faster first loads with interactivity layered in only where needed.
Key idea
Server Components keep non-interactive UI and data fetching on the server, shipping zero JavaScript for that code while client islands handle interactivity.