Frontend Fundamentals | Part 3: Under the Hood of React Server Components (RSC)

The Senior Interview Question

Here is a question I frequently ask in Senior Frontend engineering interviews:

"How can a component execute directly on the server, query a database, and show its result in the browser without sending any of its code to the client bundle?"

Many engineers conflate SSR (Server-Side Rendering) with RSC (React Server Components), but their architectures are fundamentally different.

SSR vs. RSC: The Fundamental Difference

• Traditional SSR: Generates initial HTML on the server, but still sends the full JavaScript bundle for every component to the browser for hydration.
• React Server Components (RSC): The component code executes strictly on the server. Its JavaScript dependencies never touch the client bundle!

The RSC Payload Format

Instead of sending compiled HTML or raw JS bundles, the server serializes Server Components into a lightweight stream called the RSC Payload (JSON-like virtual DOM instructions).

The client runtime consumes this stream and merges it seamlessly with Client Components without losing client-side state. This unlocks zero-bundle-size database access directly inside your component hierarchy.