Understanding React Server Components (RSC) vs SSR

The 30-Second Interview Answer

SSR is a rendering technique that produces initial HTML strings from React components, but still ships their full JavaScript bundle to the browser for hydration. RSC is a component architecture where Server Components execute exclusively on the server, shipping zero JavaScript to the client and streaming virtual DOM payloads over the wire.

Learning Objectives

Articulate why RSC does not replace SSR, but works together with it.

Explain why Server Components have a 0KB client bundle footprint.

Understand the limitations of Server Components (no hooks, no DOM access, no event handlers).

Describe how Client Components participate in both SSR and browser hydration.

Prerequisites & Background Knowledge

React virtual DOMClient bundle conceptsHydration mechanics

Why Interviewers Care

The single most frequently failed conceptual question in modern React and Next.js interviews.

The Challenge

Does React Server Components (RSC) replace Server-Side Rendering (SSR)? Compare their execution timelines, client bundle costs, and interactivity capabilities.

Code Architecture & Implementation

1// 1. REACT SERVER COMPONENT (RSC) - Zero Client Bundle Cost
2// Runs ONLY on server. Its JS code (and heavy libraries) is NEVER sent to browser.
3import db from '@/lib/db';
4import { MarkdownParser } from 'heavy-markdown-lib'; // 150KB library! 0KB sent to browser!
5
6export async function ServerArticle({ articleId }: { articleId: string }) {
7  const article = await db.article.findUnique({ where: { id: articleId } });
8  const html = MarkdownParser.render(article.body);
9
10  return (
11    <article className="prose">
12      <h1>{article.title}</h1>
13      <div dangerouslySetInnerHTML={{ __html: html }} />
14    </article>
15  );
16}
17
18// 2. CLIENT COMPONENT - Runs during SSR AND Hydrates on Client
19// Code IS included in client JS bundle. Needed for interactivity & React hooks.
20'use client';
21
22import { useState } from 'react';
23
24export function InteractiveClapButton() {
25  const [claps, setClaps] = useState(0);
26
27  return (
28    <button onClick={() => setClaps(c => c + 1)}>
29      Claps: {claps}
30    </button>
31  );
32}

Architectural Explanation

The Critical Distinction: RSC vs SSR

1. Server-Side Rendering (SSR): A Delivery Mechanism

What it does: Renders a React component tree into an HTML string on the server during the initial request so the user does not see a blank screen.
The catch: Traditional SSR requires sending the entire JavaScript bundle for all rendered components to the browser so that React can attach event listeners (hydration).

2. React Server Components (RSC): A Component Architecture

What it does: Allows components to execute exclusively on the server.
The payoff: Server Component code, dependencies, and private API keys are never included in the client bundle. The client receives rendered virtual DOM representations (the Flight payload), meaning 0KB of JavaScript is shipped for these components.

3. Do they work together?

Yes! RSC and SSR are complementary:

On initial page load, Next.js executes Server Components to produce an RSC Flight stream, and simultaneously performs SSR on both Server Components and Client Components to emit complete HTML.
On client-side page transitions, Next.js fetches only the updated RSC stream over the network, updating the UI without full document reloads or HTML generation.

Common Mistakes & Anti-Patterns

Claiming that "use client" components only run in the browser (they still pre-render to HTML on the server during initial load).

Thinking that RSC replaces SSR entirely.

Attempting to pass event listeners (onClick, onChange) directly from Server Components.

Interview Follow-Up Traps

Interviewer asks: "If I add \"use client\" to a component, does that mean it will not be server-side rendered?" Trap answer: Yes, it renders on the client only. Correct answer: False! Client Components are still rendered to static HTML on the server during initial SSR. The directive simply indicates that the component code must be bundled and hydrated in the browser.

Interviewer asks: "Can a Server Component import and render a Client Component?" Trap answer: No, they cannot mix. Correct answer: Yes! Server Components routinely import and render Client Components. The reverse is restricted: Client Components cannot directly import Server Components, but can receive them as children.

Frequently Asked Questions

Why do Server Components have 0KB bundle size?

Because their source code and imported libraries execute on the server and are stripped by the bundler from the client JavaScript bundle.

Can Server Components access browser APIs like localStorage or window?

No. Server Components run in Node.js or Edge environments where browser global objects like window, document, and localStorage do not exist.

What is the React Flight protocol?

Flight is the internal serialization protocol used by React to stream virtual DOM tree definitions and serialized props from the server to the client.

What happens when a user clicks a Link to an RSC page?

The browser fetches the RSC Flight payload (_rsc request) and React reconciles the virtual DOM in the existing page without reloading HTML documents.

Can you use React Context inside a Server Component?

No. React.createContext and useContext are not supported in Server Components because Server Components do not maintain interactive tree state.

Incremental Static Regeneration (ISR) Internals Partial Prerendering (PPR) & Cache Components