Rendering Strategies
CSR - Client-Side Rendering
The server sends a minimal HTML shell. The browser downloads JS and renders everything.
text
Server: <div id="root"></div> + bundle.js
Browser: downloads JS -> executes -> renders page- Fast navigation after initial load (SPA).
- Slow first load, weaker SEO (content not in initial HTML).
- Tools: Vite + React (Create React App is deprecated since 2025).
SSR - Server-Side Rendering
HTML is generated on the server for every request.
text
Request -> server fetches data -> renders HTML -> sends to browsertsx
// Next.js App Router - async server component
async function Page({ params }: PageProps<'/posts/[id]'>) {
const { id } = await params;
const post = await db.post.findUnique({ where: { id } }); // no need to call your own API
return <Post data={post} />;
}- Great SEO, fast first paint.
- Higher server load, slower than static files.
- Best for: dashboards, personalized content.
SSG - Static Site Generation
HTML is generated at build time - same file served to everyone.
text
build -> generates all HTML files -> deploy to CDN
request -> CDN returns pre-built HTML instantly- Fastest possible load (CDN-served static files).
- Content is stale until next build.
- Best for: blogs, docs, marketing pages.
ISR - Incremental Static Regeneration
Static pages that can revalidate in the background after a time interval.
tsx
// Next.js 16 (Cache Components) - static, refreshed in the background every hour
async function getPosts() {
'use cache';
cacheLife('hours');
return db.post.findMany();
}
// Before Cache Components: fetch(url, { next: { revalidate: 3600 } })- Best of SSG and SSR: fast delivery + fresh data.
- Best for: e-commerce product pages, news articles.
Comparison
| CSR | SSR | SSG | ISR | |
|---|---|---|---|---|
| First load | Slow | Fast | Fastest | Fastest |
| SEO | Poor | Excellent | Excellent | Excellent |
| Data freshness | Always fresh | Always fresh | Stale | Configurable |
| Server load | Low | High | None | Low |
| Build time | Fast | Fast | Slow | Medium |
Modern apps often mix strategies: SSG for marketing, SSR for user dashboards, CSR for highly interactive features. Partial Prerendering mixes them even within one page: a static shell from the CDN with dynamic parts streamed in.
updated
did you know it?