Server-Side vs Client-Side Rendering Cheat Sheet
Compares SSR, CSR, SSG, and ISR rendering strategies with real code examples and guidance on which to pick for a given use case.
2 PagesIntermediateMar 8, 2026
SSR vs CSR vs SSG vs ISR
The four main rendering strategies for the web.
- SSR- HTML generated per-request on the server, sent fully rendered to the browser
- CSR- Browser downloads a minimal HTML shell + JS bundle, then renders via JavaScript
- SSG- HTML pre-built at build time; served as static files from a CDN
- ISR- Static pages regenerated in the background after a set revalidation interval
- Hydration- Client-side JS attaches event listeners to server-rendered HTML to make it interactive
- TTFB vs TTI- SSR/SSG improve first paint; CSR often delays Time to Interactive
Server-Side Rendering (Next.js)
Data fetched and HTML rendered on every request.
javascript
// pages/product/[id].jsexport async function getServerSideProps({ params }) { const res = await fetch(`https://api.example.com/products/${params.id}`); const product = await res.json(); return { props: { product } }; // runs on every request, on the server}export default function ProductPage({ product }) { return <h1>{product.name}</h1>; // HTML is fully formed before it reaches the browser}
Client-Side Rendering (React SPA)
Data fetched and rendered entirely in the browser.
javascript
// Plain React SPA — index.html has just <div id="root"></div>import { useEffect, useState } from 'react';function ProductPage({ id }) { const [product, setProduct] = useState(null); useEffect(() => { fetch(`/api/products/${id}`) .then((res) => res.json()) .then(setProduct); // data + render happen entirely client-side }, [id]); if (!product) return <p>Loading...</p>; // blank/skeleton until JS runs return <h1>{product.name}</h1>;}
When to Choose Which
Matching the rendering strategy to the use case.
- Choose CSR- Highly interactive apps behind login (dashboards, admin panels) where SEO doesn't matter
- Choose SSR- Content that must be indexable and fresh per-request (e.g. personalized feeds)
- Choose SSG- Marketing pages, blogs, docs — infrequently changing content, cacheable at the CDN
- Choose ISR- Large catalogs where full rebuilds are too slow but content needs periodic freshness
- SEO- SSR/SSG give crawlers fully-formed HTML; CSR relies on crawlers executing JS
Pro Tip
Don't treat SSR vs CSR as all-or-nothing — most production apps mix strategies per route (SSG for marketing pages, CSR for the authenticated dashboard) using a meta-framework like Next.js, Nuxt, or Remix.
Was this cheat sheet helpful?
Explore Topics
#ServerSideVsClientSideRendering#ServerSideVsClientSideRenderingCheatSheet#WebDevelopment#Intermediate#SSR#CSR#SSG#ISR#CheatSheet#SkillVeris
