React Server Components vs Client Components: Deep Dive & Architectural Mental Model

React Server Components (RSC) represent the biggest architectural shift in React since Hooks. They allow components to execute exclusively on the server, producing zero JavaScript bundle on the client.

1. The Server Component Paradigm

In standard React, every component is bundled and sent to the browser. With RSC, server components render to an intermediate Virtual DOM format (the RSC payload) on the server. Heavy dependencies like markdown parsers or date formatting libraries stay on the server.

2. The Serialization Boundary & "use client"

The 'use client' directive does not mean "render only in browser" — it defines the boundary where component props must be JSON-serializable and interactive hooks (like useState and useEffect) become active.

3. Data Fetching Without Waterfalls

Server Components can directly query databases and APIs using standard async/await syntax without needing client-side data fetching libraries or useEffect hooks.

4. Interleaving Server & Client Components

Pass Server Components as children into Client Components to keep outer layouts fast and static while restricting interactivity only to specific buttons or modals.