Client-Side vs Server-Side Rendering in React
Understand CSR vs SSR in React: how each renders HTML, their SEO and performance trade-offs, code examples, and how to pick the right strategy per route.
Expected Interview Answer
Client-side rendering (CSR) ships a near-empty HTML shell plus a JavaScript bundle, and the browser builds the page in the DOM after the bundle downloads and runs; server-side rendering (SSR) generates the full HTML for each request on the server and sends it ready to display, then hydrates it into an interactive React app.
With CSR the first meaningful paint waits for JavaScript to download, parse, and execute, which hurts initial load and SEO but makes later in-app navigation fast. With SSR the user sees real content almost immediately and crawlers get complete markup, at the cost of extra server work per request and a hydration step to wire up interactivity. Frameworks like Next.js let you mix both per route, choosing SSR, static generation, or CSR where each fits best.
- SSR improves first contentful paint and perceived speed
- SSR gives crawlers complete HTML for better SEO
- CSR enables fast client-side navigation after load
- CSR reduces per-request server cost
- Mixing both lets each route pick the right strategy
AI Mentor Explanation
SSR is like walking into the stadium and being handed a fully printed scorecard you can read instantly. CSR is like being given a blank sheet plus the scoring rules and told to fill in every run yourself as the match replays; nothing is readable until you finish the work in your own hands.
Step-by-Step Explanation
Step 1
Identify where HTML is built
In CSR the browser builds the DOM from JavaScript; in SSR the server produces the full HTML string per request.
Step 2
Trace the first paint
CSR shows a blank shell until the bundle runs; SSR shows real content as soon as the HTML arrives.
Step 3
Account for interactivity
SSR HTML is static until React hydrates it; CSR is interactive once the bundle executes.
Step 4
Weigh SEO and performance
SSR gives crawlers full markup and faster FCP; CSR trades that for cheaper servers and fast in-app navigation.
Step 5
Choose per route
Use SSR or static generation for content and SEO pages, CSR for highly interactive app-like screens.
What Interviewer Expects
- Clear definition of both rendering models
- Understanding of the trade-offs in FCP, SEO, and server cost
- Awareness that SSR still requires hydration
- Knowledge that frameworks mix strategies per route
- A concrete example of when to pick each
Common Mistakes
- Claiming SSR removes the need for JavaScript entirely
- Thinking SSR pages are interactive before hydration completes
- Assuming CSR is always slower for every metric
- Confusing SSR with static site generation
- Ignoring server load implications of SSR
Best Answer (HR Friendly)
“Client-side rendering means the browser builds the page after downloading the app's JavaScript, while server-side rendering means the server sends a ready-made HTML page so users and search engines see content immediately. Teams often mix both, using server rendering for content pages and client rendering for highly interactive parts.”
Code Example
// app/products/page.jsx (Server Component, SSR by default)
export default async function ProductsPage() {
const res = await fetch('https://api.example.com/products', {
cache: 'no-store', // render on every request
})
const products = await res.json()
return (
<ul>
{products.map((p) => (
<li key={p.id}>{p.name}</li>
))}
</ul>
)
}'use client'
import { useEffect, useState } from 'react'
export default function Products() {
const [products, setProducts] = useState([])
useEffect(() => {
fetch('https://api.example.com/products')
.then((r) => r.json())
.then(setProducts)
}, [])
return (
<ul>
{products.map((p) => (
<li key={p.id}>{p.name}</li>
))}
</ul>
)
}Follow-up Questions
- How does static site generation differ from SSR?
- What is hydration and why does SSR need it?
- How does Next.js let you choose rendering per route?
- What are the SEO implications of pure CSR?
- When would you deliberately prefer CSR over SSR?
MCQ Practice
1. In client-side rendering, when does the user first see meaningful content?
CSR ships a near-empty shell, so meaningful content appears only after the JavaScript bundle downloads, parses, and runs to build the DOM.
2. Which is a primary advantage of SSR over CSR?
SSR sends complete HTML, so users see content sooner and crawlers get full markup; it still requires hydration to become interactive.
3. What step makes server-rendered HTML interactive in React?
Hydration attaches React's event listeners and state to the already-present server-rendered DOM, turning static HTML into a live app.
Flash Cards
What does CSR ship first? — A minimal HTML shell plus a JavaScript bundle that builds the page in the browser.
What does SSR send? — Fully rendered HTML generated per request on the server, ready to display, then hydrated.
Main SSR benefit? — Faster first contentful paint and complete markup for SEO.
Main CSR benefit? — Cheaper per-request servers and fast client-side navigation after the initial load.
Can you mix them? — Yes — frameworks like Next.js pick SSR, static generation, or CSR per route.