Which rendering mode is fastest?

SSG provides the fastest TTFB and LCP because pages are pre-built and served from CDN with zero server processing. ISR is nearly as fast while supporting content updates.

CSR makes it harder for search engines to crawl content because they must execute JavaScript. SSR and SSG are better for SEO because content is in the initial HTML. Google can render JavaScript but it's slower and less reliable.

Can I mix rendering modes?

Yes. Next.js supports SSG, SSR, ISR, and CSR on a per-page basis. Use SSG for most pages and SSR for dynamic ones.

What about React Server Components?

RSC blur the SSR/CSR line. Components render on the server with zero client JS by default. Interactive components ('use client') hydrate normally. This gives SSR-level performance with CSR-level interactivity.

CSR vs SSR vs SSG vs ISR: Rendering Modes Performance Guide 2026

TL;DR — Quick Summary

Four rendering strategies: CSR (JS builds page in browser — slow FCP/LCP), SSR (server renders per request — fast FCP, higher TTFB), SSG (pre-built at deploy — fastest), ISR (SSG + background refresh — fast + fresh). Choose based on content dynamism and SEO needs.

What is Rendering Modes (CSR, SSR, SSG, ISR)?

Web rendering modes determine where and when HTML is generated:

Client-Side Rendering (CSR): The server sends a minimal HTML shell; JavaScript builds the page in the browser. Frameworks like React default to this. Fast for highly interactive apps but produces slow FCP/LCP because the browser must download, parse, and execute JS before showing content.

Server-Side Rendering (SSR): The server generates complete HTML on each request. The browser shows content immediately while JavaScript 'hydrates' it for interactivity. Fast FCP/LCP, better SEO, but higher server load and slightly higher TTFB. Used by Next.js, Nuxt.js, Remix.

Static Site Generation (SSG): HTML pages are generated at build time and served from CDN with no server processing. Fastest possible TTFB (< 50ms) and LCP. Ideal for content that doesn't change between requests. Used by Next.js, Gatsby, Astro, Hugo.

Incremental Static Regeneration (ISR): Combines SSG speed with SSR freshness. Pages are initially generated at build time but regenerate in the background after set intervals. Visitors get cached (fast) pages while new versions build behind the scenes. Introduced by Next.js.

History & Evolution

•2000s — Server-rendered HTML (SSR) is the default. PHP, ASP, JSP generate HTML per request.
•2013 — React popularizes CSR. Single Page Applications (SPAs) become the dominant architecture.
•2016 — Next.js introduces SSR for React, solving CSR's SEO and performance issues.
•2019 — Next.js adds SSG and ISR, enabling static generation with on-demand regeneration.
•2021 — Astro introduces 'Islands Architecture' — static HTML with selective hydration.
•2025–2026 — React Server Components blur the line between SSR and CSR. Streaming HTML enables progressive rendering.

Frequently Asked Questions

For step-by-step optimization, platform-specific fixes, code examples, and case studies, read our full guide:

The Ultimate Guide to Core Web Vitals: How to Pass All Metrics & Boost Rankings in 2026

The Ultimate Guide to Web Hosting, CDN & Infrastructure for Speed: TTFB, Caching, Edge Workers & Traffic Resilience in 2026

Struggling with Rendering Modes (CSR, SSR, SSG, ISR)?

Request a free speed audit and we'll identify exactly what's holding your scores back.

Rendering Modes (CSR, SSR, SSG, ISR) · Definition & Explanation 2026