Rendering Strategies

Every page has three questions to answer: where does the HTML come from, when is it generated, and who fetches the data. The answers determine latency, SEO, cost, and freshness.

Analogy

Rendering strategies are like how a restaurant serves food. SSG is a bakery display case: trays baked in the morning, sitting ready under the glass, grabbed in seconds — but yesterday's loaves are still out there. SSR is a made-to-order kitchen: every plate prepared when you walk in, always fresh, but you wait and the kitchen needs a full brigade. CSR is a meal kit delivered to your door that you assemble yourself: the restaurant ships ingredients cheap, but the customer does the cooking. ISR is a bakery that re-bakes a tray the moment the last one sells. RSC is a chef in the back calling out a finished plate over the pass — you get the result, never the mise en place.

The five strategies

Strategy	Abbreviation	HTML generated	Data fetched
Client-Side Rendering	CSR	In the browser	After load, by JS
Server-Side Rendering	SSR	On the server, per request	On the server, per request
Static Site Generation	SSG	At build time	At build time
Incremental Static Regen.	ISR	At build time + background	At build time + background
React Server Components	RSC	On the server, per request	On the server, streaming

CSR — Client-Side Rendering

The server sends a nearly empty HTML shell. JavaScript runs in the browser, fetches data, and renders the UI.

Wins: logged-in dashboards, real-time feeds, anything behind authentication that must never be cached publicly.

Loses on: SEO (crawlers may not execute JS), LCP (user waits for JS bundle before seeing content).

SSR — Server-Side Rendering

The server renders a complete HTML page on every request and sends it. The browser hydrates the existing markup with React.

Wins: user-specific pages that need fresh data, e-commerce checkout, any page where stale content is unacceptable.

Loses on: server cost (every request needs a compute cycle), TTFB (server must finish before the browser gets anything).

SSG — Static Site Generation

Pages are rendered once at deploy time and stored as HTML files. A CDN serves them at edge locations worldwide.

Wins: marketing pages, docs, blogs, anything that changes only on deployment. Zero server load, sub-100ms TTFB from the edge.

Loses on: pages that change more often than you deploy, or per-user content.

ISR — Incremental Static Regeneration

Like SSG, but pages can be regenerated in the background after a configurable interval. The first visitor after expiry gets the cached (stale) page while the new version builds. The next visitor gets the fresh page.

// Next.js — revalidate every 60 seconds
export const revalidate = 60;

Wins: blogs, product catalogues, content that updates hourly. Best of both SSG performance and SSR freshness.

RSC — React Server Components

Components that run exclusively on the server. They can await database queries, read the file system, and access secrets — none of that code ships to the client. The output streams to the browser as it resolves.

// This component runs on the server — no bundle impact
export default async function ProductList() {
  const products = await db.query("SELECT * FROM products LIMIT 20");
  return <ul>{products.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}

Wins: data-heavy pages where you want the smallest possible client bundle, search results, product pages.

Hydration and streaming

SSR and RSC both ship pre-rendered HTML and React. The browser paints the HTML instantly (fast FCP), then React attaches event handlers (hydration). Streaming SSR sends HTML in chunks so the browser can start painting before the server has finished rendering — critical for LCP.

Partial Prerendering (PPR)

A single page can mix static and dynamic rendering. The static shell (navigation, layout) is served from the CDN instantly. Dynamic slots (personalised content, live inventory) stream in afterwards. PPR is the convergence of SSG speed and SSR freshness on the same URL.

Decision guide

Page type	Recommended strategy
Marketing landing page	SSG
Blog post	SSG or ISR
Product search	RSC
Logged-in dashboard	CSR or SSR
Checkout / payment	SSR
Live scores / chat	CSR + WebSocket
Documentation	SSG