Back
Web Fundamentals

Rendering Strategies: CSR vs SSR vs SSG vs ISR

Web Fundamentals
Build & Deployment: Monorepo, CI/CD, Strategies & Release SafetyState Management: Choosing the Right SolutionRedux: Predictable State Container (RTK + RTK Query)React Query (TanStack Query): Server State CachingData Fetching Patterns: REST, GraphQL, tRPC & Real-timeGraphQL Fundamentals for Frontend: Shape, Caching, and TradeoffsgRPC-Web Fundamentals: Browser Constraints and Proxy ModelCaching Strategies: Client, Server & EdgeData Normalization: Organizing State for PerformanceAPI Design Best Practices: Pagination, Errors, Versioning & Type SafetyAPI Versioning Strategies for Frontend CompatibilityPagination: Offset vs Cursor-BasedRate Limiting & API Resilience: Retries, Backoff, Jitter, IdempotencyHow Frontend Developers Can Handle Millions of API Requests Without Crashing EverythingBrowser Storage: Cookies, SessionStorage, LocalStorage, IndexedDBReal-time Communication: WebSockets, SSE & PollingWebRTC: Real-Time Communication in the BrowserCore Web Vitals: LCP, INP & CLSPerformance Optimization Trade-offsCritical Resource Prioritization: Optimize Loading OrderCode Splitting: Optimize Bundle Size with Dynamic ImportsTree Shaking: Eliminate Dead Code from Your BundleLazy Loading: Load Resources On-DemandResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip and BrotliImage & Video Optimization: Modern Formats & TechniquesAdaptive Loading: Optimize for Device & NetworkList Virtualization: Render Large Lists EfficientlyWeb Workers vs Main Thread: Offloading Heavy WorkMemory Leaks in Frontend Apps: Detection & PreventionManaging Third-Party Scripts: Optimization StrategiesHow CDNs Work: Edge Delivery, Caching & PerformanceHTTP Caching Deep Dive: Cache-Control, ETag & RevalidationService Workers & Offline Strategy: Cache First, Network First & Update LifecyclePWA Fundamentals: Manifest, Installability & Offline UXCritical Rendering PathScript Loading: async vs deferEvent Loop: Understanding JavaScript Execution ModelJavaScript Module Systems: CJS vs ESM vs UMDDynamic Module Loading: import() FunctionImport on Interaction: Load When User InteractsImport on Visibility: Lazy Loading with IntersectionObserverBrowser Rendering Pipeline & Layout ThrashingRendering Strategies: CSR vs SSR vs SSG vs ISRStreaming SSR: Progressive HTML StreamingIslands Architecture: Independent Component HydrationReact Server Components: Zero-JS Server RenderingFramework Reactivity: React, Vue, Svelte & SolidHTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend PerformanceDNS Resolution: Path, TTL, Caching & Frontend ImpactCross-Site Scripting (XSS) AttacksCross-Site Request Forgery (CSRF) AttacksCORS Explained: Cross-Origin Resource SharingCORS Preflight in Practice: Credentials, Simple Requests & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? Understanding TLS/SSLAuthorization Best PracticesCookie Security & Session Hardening: SameSite, HttpOnly, Secure
mediumRendering & Browser Architecture

Rendering Strategies: CSR vs SSR vs SSG vs ISR

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.

PropertyCSRSSRSSGISR
SeoPoorExcellentExcellentExcellent
Best ForDashboards, admin panels, SPAsSEO-heavy, dynamic contentBlogs, marketing sites, docsE-commerce, content sites needing freshness
Server CostLowHigh (per request)NoneLow
Initial LoadSlow (needs JS + data fetch)Fast HTMLFastest (CDN)Fastest (cached)
InteractivityExcellentGood (after hydration)Good (after hydration)Good

CSR

Seo

Poor

Best For

Dashboards, admin panels, SPAs

Server Cost

Low

Initial Load

Slow (needs JS + data fetch)

Interactivity

Excellent

SSR

Seo

Excellent

Best For

SEO-heavy, dynamic content

Server Cost

High (per request)

Initial Load

Fast HTML

Interactivity

Good (after hydration)

SSG

Seo

Excellent

Best For

Blogs, marketing sites, docs

Server Cost

None

Initial Load

Fastest (CDN)

Interactivity

Good (after hydration)

ISR

Seo

Excellent

Best For

E-commerce, content sites needing freshness

Server Cost

Low

Initial Load

Fastest (cached)

Interactivity

Good

Common questions

  • ›“Compare CSR vs SSR vs SSG vs ISR.”
  • ›“When would you choose SSG over SSR?”
  • ›“What is hydration and why does it matter?”
  • ›“How do you handle dynamic content with static strategies?”

What interviewers look for

  • Understanding trade-offs (latency, SEO, cost, freshness)
  • Knowledge of hydration and its performance impact
  • Real-world decision making (hybrid approaches)
  • Awareness of TTFB, LCP, and bundle size

Short answer (60 sec)

CSR renders on client (slow first load). SSR renders per request on server (fast HTML, high server cost). SSG pre-renders at build time (fastest, static). ISR adds background revalidation to SSG for freshness.

Detailed answer (senior level)

Each strategy moves the rendering work to a different time and place. CSR shifts everything to the client. SSR does per-request work on the server. SSG moves work to build time for CDN performance. ISR keeps most benefits of SSG while allowing periodic updates. Most production apps use hybrids: SSG/ISR for public pages and CSR for authenticated interactive areas. Hydration cost is often the hidden bottleneck after choosing a strategy.

  • Using CSR for public SEO-important pages
  • Using SSR for highly static content (wastes server resources)
  • Forgetting hydration cost in SSR/SSG
  • Treating ISR as real-time (stale content window exists)
  • Not measuring real user metrics (LCP, TTI, bundle size)
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
Previous TopicBrowser Rendering Pipeline & Layout ThrashingNext Topic Streaming SSR: Progressive HTML Streaming

On this page