Chapter 22
The SSG Spectrum
Pure SPA, SSG, SSR, ISR — the rendering spectrum for React in 2026, and how to pick per-page based on SEO, TTI, build time, and data dynamism.
Published 2026-05-23
🎯 Chapter Goal — After this chapter you can place any rendering strategy (pure SPA, SSG, SSR, ISR) on a clear taxonomy, and pick the right one for a given page based on SEO, TTI, build time, and data dynamism.
🧭 Prerequisites — None.
🔹 22.1 Four strategies, clearly
┌──────────────────────────────────────────────────────────────────────────┐
│ STRATEGY │ HTML BUILT WHEN? │ JS HYDRATES? │ TYPICAL │
├──────────────┼─────────────────────────────┼───────────────┼────────────┤
│ SPA │ At deploy (empty shell) │ Yes, on load │ App │
│ SSG │ At build (full HTML) │ Yes, on load │ Docs, blog │
│ SSR │ At request (per request) │ Yes, on load │ Marketplace│
│ ISR │ At build + revalidation │ Yes, on load │ E-commerce │
└──────────────────────────────────────────────────────────────────────────┘SPA (Single-Page App) — index.html is a near-empty shell pointing at a JS bundle. The browser downloads the JS; React renders the app; data fetches happen client-side. What this book is mostly about.
SSG (Static Site Generation) — every page is HTML produced at build time. The browser gets fully-rendered HTML; React hydrates afterward to add interactivity. Best for content that doesn’t change per request.
SSR (Server-Side Rendering) — every request renders HTML on the server, then ships it. The browser sees content faster than SPA (no JS-to-render gap), but the server does work per request. Best for content that depends on the request (user, geo, A/B test).
ISR (Incremental Static Regeneration) — start with SSG, but the server can re-render a page on a stale-while-revalidate basis. Best for “mostly static, occasionally updates” — product pages, blog posts.
🔹 22.2 Decision matrix
| Concern | SPA | SSG | SSR | ISR |
|---|---|---|---|---|
| SEO | Weak (crawlers see empty shell) | Excellent | Excellent | Excellent |
| TTI (first byte → interactive) | Slow (full JS download + render) | Fast (HTML + small hydrate) | Fast | Fast |
| Build time | Fast | Slow (renders every page) | N/A | Medium |
| Per-request cost | Tiny (static) | Tiny (static) | High (renders) | Low (mostly cached) |
| Dynamic data | Easy (client fetch) | Hard (build-time only) | Easy | Moderate |
| Authed content | Trivial | Impossible (it’s public) | Trivial | Impossible (it’s cached) |
| CDN-friendly | Yes (one HTML, JS chunks) | Yes (every page) | No (per-request) | Yes (cached) |
| Developer mental model | Simple (one app) | Medium (build pipeline) | Complex (server) | Complex |
Picking by page type
| Page | Best strategy | Why |
|---|---|---|
| Marketing homepage | SSG | SEO + TTI; content rarely changes |
| Pricing page | SSG | Same; rebuild on pricing change |
| Docs | SSG | Same |
| Blog | SSG (or ISR for frequent updates) | Same |
| Product listing (e-commerce) | ISR | Mostly static, occasionally updates |
| Product detail page | ISR | Same |
| Search results | SSR (or client-side) | Per-request; can’t be pre-rendered |
| User dashboard | SPA | Auth-gated; per-user content |
| Admin tool | SPA | Auth-gated; complex interactions |
| Real-time monitoring | SPA | Live data; WebSocket |
The honest hybrid pattern
Most real products mix strategies:
- Marketing / docs site under
/— SSG. - Customer SPA under
/app/*— SPA. - Per-request widget (search, recommendations) — SSR via edge function.
Part 6 covers the tools (Ch 23) and the hybrid wiring (Ch 24).
🪤 Common Pitfalls
- SSG for authenticated content — you’ve shipped public HTML of private data.
- SSR for a 200-page docs site — every request renders; CDN can’t cache; you’re paying for static work.
- SPA for a marketing page — Google sees an empty page until JS runs; SEO suffers.
- ISR for content that needs to be instantly fresh — revalidation has a window.
- Picking strategy by team familiarity rather than page needs — “we know React, so SPA for everything” misses real SEO/perf wins on the marketing surface.
✅ Recap
- Four strategies; the right choice is per-page, not per-app.
- SPA for auth-gated dynamic apps; SSG for content; SSR for per-request; ISR for “mostly static.”
- Real products are hybrid. Ch 24 shows the wiring.
🔗 Further Reading
- Patrick Lee Scott — “The four rendering strategies” canonical post.
- Vercel / Cloudflare docs on each strategy.
- Ch 23 (SSG tools); Ch 24 (hybrid).
In the book — not on the site
Each topic has an 🧠 Under-the-hood subsection — the algorithm, the data structures, what React DevTools surfaces, debugging recipes. Plus a 🧪 hands-on lab per chapter with a starter repo. Reserved for the book.