Web Fundamentals

Rendering Strategies: CSR vs SSR vs SSG vs ISR

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
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
PreviousNext

Topic Guide

On this page