How Server Components, Client Components, and the render pipeline fit together as a system.
The App Router's architecture is built around one core idea: render as much as possible on the server, and ship the smallest possible slice of interactive JavaScript to the client. Server Components render to a special RSC (React Server Component) payload — not HTML directly, and not a typical JSON API response either — which the client uses to reconcile the tree. That payload format is exactly what lets Server Components and Client Components interleave within the same tree without either one needing to know the other exists.
This reshapes what a typical architecture decision looks like. Instead of 'the frontend calls a backend API,' data fetching often happens directly inside Server Components, close to where it's actually used — colocating what used to be a strictly separate backend concern with the component that needs it. Client Components stay reserved for genuinely interactive leaves — a like button, a form, a dropdown — rather than being how the whole page gets built, which is close to the inverse of how a traditional single-page app is architected by default.
What you'll walk away knowing