Choosing the right rendering strategy is one of the most impactful architectural decisions. Here's when to use each.
Client-Side Rendering (CSR)
The browser downloads a minimal HTML shell, then JavaScript renders everything.
<!-- Initial HTML -->
<div id="root"></div>
<script src="/bundle.js"></script>
// JavaScript fetches data and renders UIPros: Rich interactivity, simpler deployment, good for authenticated apps
Cons: Slow initial load, poor SEO (without prerendering), blank screen until JS loads
Server-Side Rendering (SSR)
Server renders full HTML on each request. Client hydrates for interactivity.
// Server generates complete HTML
app.get("/products/:id", async (req, res) => {
const product = await db.getProduct(req.params.id);
const html = renderToString(<ProductPage product={product} />);
res.send(wrapInShell(html));
});Pros: Fast FCP, great SEO, dynamic content
Cons: Server load per request, TTFB depends on data fetching speed, hydration cost
Static Site Generation (SSG)
Pages pre-rendered at build time. Served as static HTML from CDN.
// Build time: generate all product pages
export async function getStaticPaths() {
const products = await db.getAllProducts();
return products.map(p => ({ params: { id: p.id } }));
}
export async function getStaticProps({ params }) {
const product = await db.getProduct(params.id);
return { props: { product } };
}Pros: Fastest possible (CDN-served), cheapest (no server), perfect SEO
Cons: Build time grows with pages, stale data until rebuild
Incremental Static Regeneration (ISR)
SSG + background revalidation. Serves stale page while regenerating in the background.
export async function getStaticProps() {
const data = await fetchData();
return {
props: { data },
revalidate: 60 // Regenerate every 60 seconds
};
}Pros: SSG performance + fresh data, scales infinitely
Cons: Stale data window, Next.js specific (mostly)
Decision Matrix
| Use Case | Strategy |
|---|---|
| Blog, docs, marketing | SSG |
| E-commerce product pages | ISR |
| Dashboard, admin panel | CSR |
| Social media feed | SSR |
| News site | ISR or SSR |