Learn the concept
React Fundamentals
CSR renders entirely in the browser, SSR generates HTML on each request server-side, and SSG pre-builds HTML at build time. Each has different tradeoffs for performance, SEO, and data freshness.
React applications can use different rendering strategies depending on performance, SEO, and data requirements. Understanding these patterns is critical for choosing the right approach for each page in a modern React application.
The server sends a minimal HTML shell with a <script> tag. React renders the entire UI in the browser.
How it works:
<div id="root"></div>)Pros: Simple deployment (static files), rich interactivity, no server needed at runtime Cons: Slow initial load (blank screen until JS loads), poor SEO (search engines see empty HTML), large JS bundles
Best for: Dashboards, admin panels, apps behind authentication
The server renders React components to HTML on every request, sends the full HTML to the browser, then React hydrates it to make it interactive.
How it works:
Pros: Fast initial paint, good SEO (full HTML for crawlers), dynamic data per request Cons: Server load on every request, Time to Interactive delayed until hydration completes, more complex infrastructure
Best for: E-commerce product pages, news articles, content that changes frequently
React components are rendered to HTML at build time. The generated HTML files are served from a CDN.
How it works:
Pros: Fastest possible load time (CDN-cached HTML), excellent SEO, minimal server cost, no runtime server needed Cons: Data can be stale (requires rebuild for updates), build time grows with page count, not suitable for user-specific content
Best for: Blogs, documentation, marketing pages, landing pages
A newer pattern where components run only on the server and send rendered output (not JavaScript) to the client. Server Components can fetch data directly, access the file system, and query databases — without adding to the client bundle.
Client Components (marked with 'use client') handle interactivity. The key insight: most components don't need interactivity and can remain server-only, dramatically reducing the JavaScript sent to the browser.
Hydration is the process where React attaches event handlers to server-rendered HTML. During hydration, React walks the existing DOM and "adopts" it rather than re-creating it. If the server HTML doesn't match what React expects, a hydration mismatch error occurs.
Common mismatch causes: using Date.now(), Math.random(), browser-only APIs (window, localStorage), or browser extensions modifying the DOM.
// index.html — minimal shell
// <div id="root"></div>
// main.jsx — all rendering happens in the browser
import { createRoot } from 'react-dom/client';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
// The user sees a blank page until JS downloads and executes
// SEO crawlers may not see any contentProduct pages use SSR for SEO and fresh pricing data, while the shopping cart uses CSR for real-time interactivity.
Technical documentation uses SSG for fast loading and great SEO, with client-side search and navigation for interactivity.
Build the same page using CSR (Vite), SSR (Next.js dynamic), and SSG (Next.js static). Measure and compare Lighthouse scores for each approach.