Rendering: CSR, SSR, SSG and ISR
Next.js can build a page in different places and at different times — here is each one in plain words.
What you will learn
- Tell apart CSR, SSR, SSG and ISR
- Match a page type to the right strategy
- Understand why server rendering helps SEO
Where and when is the HTML made?
A web page is just HTML. The big question is where that HTML is built (your server, or the visitor browser) and when (ahead of time, or on every request). Next.js supports four answers, and the names sound scary but the ideas are simple.
| Name | When the HTML is made | Best for |
|---|---|---|
| CSR (client-side) | In the browser, after load | Private dashboards behind a login |
| SSR (server-side) | On the server, every request | Pages that change per user / per request |
| SSG (static) | Once, at build time | Blog posts, docs, marketing pages |
| ISR (incremental static) | At build, then re-made now and then | Static pages with data that updates |
A quick analogy
- CSR is like getting flat-pack furniture — the browser assembles the page after it arrives.
- SSR is a fresh meal cooked to order every time you ask.
- SSG is meals cooked in advance and ready to grab instantly.
- ISR is cooked in advance, but the kitchen re-cooks a fresh batch every so often.
SSR vs SSG — the one thing that confuses beginners
Both SSR and SSG build real HTML on the server, so people mix them up. The difference is only when the cooking happens, and that changes the trade-off:
- SSG cooks the page once when you deploy. Every visitor gets that same saved file, so it is lightning fast — but the content is frozen until your next deploy. Perfect for a blog post that does not change.
- SSR cooks the page freshly on every request. It is a little slower per visit, but it can show data that is different for each user or each second. Perfect for a personalised feed or a live price.
A simple worked example: a marketing home page that says the same thing to everyone for weeks → SSG. A "your orders" page that must show this logged-in user’s latest orders → SSR. Same server-rendered HTML; the only question is whether it is safe to build it ahead of time.
// SSG by default: this page is built once and reused.
// Add this line and it becomes ISR — rebuilt at most every 60 seconds.
export const revalidate = 60;
export default function NewsPage() {
return <h1>Latest news</h1>;
}Note: Output (behaviour, not text): Visitors get the pre-built page instantly. After 60 seconds, the next visit triggers Next.js to quietly rebuild the page with fresh data. You get static speed AND reasonably fresh content.
Why this matters for SEO
Search engines and social previews read the HTML that arrives. With CSR the page arrives nearly empty and fills in later, which search bots may miss. With SSR and SSG the real content is already in the HTML — so Next.js pages are naturally SEO-friendly.
Tip: A good default: use static (SSG) when you can — it is the fastest and cheapest. Switch to SSR only when the page truly must be fresh for every request (like a personalised feed).
Q. Which strategy builds the HTML once at build time and serves it to everyone?
✍️ Practice
- For each page, pick a strategy: a personal dashboard, a marketing home page, a blog post, a stock-price page.
- Explain in one sentence why CSR can hurt SEO.
🏠 Homework
- Write a short note matching CSR, SSR, SSG and ISR each to a real website you know and why it fits.