Web Fundamentals

Rendering Strategies: CSR vs SSR vs SSG vs ISR

mediumWeb Fundamentals

Rendering Strategies: CSR vs SSR vs SSG vs ISR

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRCSR (client-heavy) • SSR (per-request) • SSG (build-time static) • ISR (static + revalidation)
Very High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

Modern web apps choose rendering strategies based on where and when HTML is generated. CSR renders on the client after JS loads. SSR renders HTML on the server per request. SSG pre-renders HTML at build time. ISR combines static delivery with background revalidation. The best choice balances TTFB, LCP, SEO, interactivity, and server cost.

CSR = customer cooks the meal after arriving (slow first bite, fast refills). SSR = chef cooks fresh per order (fast first bite, expensive at scale). SSG = pre-cook everything during prep time (fastest service, food can get stale). ISR = pre-cook most things and refresh popular dishes periodically (best balance).

Request Arrives

CSR

Minimal HTML + JS renders

SSR

Server renders fresh HTML

SSG

CDN serves pre-built HTML

ISR

Cached HTML + background refresh

Hydration → Interactive

1Client-Side Rendering (CSR)

Server sends minimal HTML + JS bundle. Browser downloads, parses, and executes JS to fetch data and render UI. Excellent for highly interactive apps but slow initial load.

App.jsxjsx
function App() {
  const [data, setData] = useState(null);
  useEffect(() => { fetchData().then(setData); }, []);
  return data ? <Dashboard data={data} /> : <Loader />;
}

2Server-Side Rendering (SSR)

Server generates full HTML with data on every request, then sends it to the browser. JS hydrates for interactivity. Great for SEO and fast First Contentful Paint.

3Static Site Generation (SSG)

HTML is generated at build time and served statically from a CDN. Zero server work per request — fastest possible delivery.

4Incremental Static Regeneration (ISR)

Combines SSG speed with freshness. Pages are pre-rendered but can be regenerated in the background after a revalidation period or on-demand.

Key Takeaways
  • ✓No single best strategy — choose based on SEO, freshness, traffic, and interactivity needs
  • ✓SSG + ISR gives the best performance for most content sites
  • ✓CSR excels for rich, personalized, interactive experiences
  • ✓Hydration is a major hidden cost in SSR and SSG
  • ✓Most real apps use hybrid approaches per page/route
  • ✓Always measure TTFB, LCP, and Time to Interactive