Rendering Strategy

Last updated:

Static, server, client, and hybrid rendering — choose per route, not by framework default.

01 — Purpose

Choose rendering on purpose

Static, server, client, and hybrid rendering each trade speed, dynamism, and complexity — choose per route, not by framework default.

The wrong default — CSR for a marketing site, static for a live dashboard — hurts users and teams alike. Hybrid models (static HTML plus hydrated islands) are often the answer for content-heavy products with pockets of interactivity.

See hydration and client interactivity and progressive enhancement strategy.

02 — Models

Static, SSR, and CSR

Not every page needs the same rendering model.

  • Static — pre-built HTML; fast delivery, high resilience, ideal for content-heavy sites
  • SSR — HTML per request; personalised or frequently changing content
  • CSR — client-rendered; dense app shells where client state dominates
  • Hybrid — static or SSR shell with hydrated islands for widgets

03 — Practice

When to use each approach

Map top routes — content freshness, personalisation, and interactivity drive the choice.

  • static for docs, marketing, and reference — CDN-friendly, minimal TTFB
  • SSR for account home, search results, and SEO-sensitive dynamic pages
  • CSR sparingly — dashboards where client state truly dominates
  • measure TTFB and LCP per strategy — see TTFB and backend impact

04 — Avoid

Rendering mismatches

Over-engineering simple experiences wastes users’ time.

  • CSR for brochure sites — blank shell until JS loads, poor SEO and LCP
  • SSR everything — unnecessary server cost for truly static pages
  • choosing by trend — not by route requirements
  • ignoring resilience — CSR fails hard when JS errors or networks stall

05 — Close

Match the model to the page

Revisit rendering when product requirements change — update the route map, not only the framework version.

List your top routes. For each, ask how often content changes, whether it varies per user, and how much client interactivity is required.

See performance budgets and performance standard.