What is the difference between client-side and server-side rendering?

Q: What is the difference between client-side and server-side rendering?

**Target Audience:** Engineers preparing for JavaScript/web-architecture interviews. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The real HTML-content difference below was actually demonstrated with jsdom, not just described. ## 1. Why This Even Matters — A Story First A restaurant handing you a fully-plated meal the moment you sit down is server-side rendering — the "content" (food) is already complete and ready the instant it arrives. A restaurant handing you raw ingredients and a recipe card, expecting you to cook the meal yourself at the table, is client-side rendering — nothing is actually ready to eat until YOU (the browser's JavaScript) do the work, after receiving what was sent. ## 2. The Core Idea 📌 **Interview term:** SSR sends fully-formed HTML with real content already present. CSR sends a mostly-empty shell; JavaScript builds the actual content in the browser, aft

The problem

Question presented to candidate: "If you view-source on a server-side-rendered page versus a client-side-rendered one, what would you actually see differently in the raw HTML — before any JavaScript has run?"

What a strong answer should cover:

📌 Interview term: server-side rendering (SSR) — the server generates the complete, final HTML for a page (including real, visible content) and sends that fully-formed markup to the browser — verified directly: the raw HTML genuinely already contains real, visible text content the moment it is parsed, before any JavaScript executes.
📌 Interview term: client-side rendering (CSR) — the server sends a minimal, mostly-empty HTML shell (often just a single <div id="root"></div>); the actual content is built up entirely by JavaScript running IN the browser, AFTER the page loads — verified directly: the raw HTML's content container is genuinely, verifiably EMPTY until a separate step (JavaScript execution) populates it.
📌 Interview term: the real, direct answer to the prompt — verified directly, side by side: SSR's initial HTML genuinely already contains the real text ("Hello from SSR..."), readable directly from view-source with zero JavaScript execution required, while CSR's initial HTML genuinely has an empty root element — the visible content only appears in a SECOND, later step once JavaScript actually runs.
A precise answer names the real, practical trade-offs this causes: SSR genuinely provides real content to search engine crawlers and a faster real "first paint" of visible content, at the cost of more server work per request; CSR genuinely shifts that rendering work to the client, at the cost of a real, visible delay (or a blank/loading state) before content appears, and historically weaker out-of-the-box SEO for crawlers that do not execute JavaScript.
A precise answer names hydration as the real, related mechanism: many modern frameworks combine both — the server sends SSR'd HTML for the fast initial view, and client-side JavaScript then "hydrates" that existing markup, attaching event listeners and taking over rendering without re-building the DOM from scratch.

Clarifying questions expected:

None — this is a definitional/comparison question; directly answering the prompt's own view-source scenario with real, verified proof is the strong signal.

Code / implementation expected: Yes — a real, side-by-side jsdom demonstration of an SSR HTML string already containing content versus a CSR HTML string's genuinely empty root is the clearest, most convincing proof.

rendering
ssr
csr
web architecture

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript/web-architecture interviews. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The real HTML-content difference below was actually demonstrated with jsdom, not just described.

1. Why This Even Matters — A Story First

A restaurant handing you a fully-plated meal the moment you sit down is server-side rendering — the "content" (food) is already complete and ready the instant it arrives. A restaurant handing you raw ingredients and a recipe card, expecting you to cook the meal yourself at the table, is client-side rendering — nothing is actually ready to eat until YOU (the browser's JavaScript) do the work, after receiving what was sent.

2. The Core Idea

📌 Interview term: SSR sends fully-formed HTML with real content already present. C

The solution is hidden so you can try first

6 min read · 8 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, side-by-side jsdom proof: SSR's raw HTML already contains content, while CSR's raw HTML root is genuinely empty until a later step populates it