Web development has evolved far beyond writing static HTML pages. The way we render content today affects everything—from page speed and SEO to user experience and scalability.
If you’ve heard terms like SSR, SSG, CSR, ISR, Edge Rendering, or Streaming SSR and felt a bit overwhelmed, this article will guide you through each rendering technique with clear examples.
🌐 1. Client-Side Rendering (CSR)
What it is
In CSR, the browser gets a nearly empty HTML file with a JavaScript bundle. Once the JS executes, the page is built dynamically.
Example (React App index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
The <div id="root"> stays empty until JavaScript runs, mounts React, and paints the UI.
Pros:
✅ Highly interactive
✅ Great for SPAs (dashboards, tools)
✅ Simpler hosting (static files only)
Cons:
❌ Slower first paint (blank until JS loads)
❌ SEO challenges without prerendering
When to use: Dashboards, admin panels, web apps where SEO isn’t a top priority.
⚡ 2. Server-Side Rendering (SSR)
What it is
The server generates HTML for every request, so users see content immediately.
Example (Next.js):
// pages/index.js
export async function getServerSideProps() {
const res = await fetch("https://api.example.com/posts");
const posts = await res.json();
return { props: { posts } };
}
export default function Home({ posts }) {
return (
<div>
<h1>Latest Posts</h1>
{posts.map(post => <p key={post.id}>{post.title}</p>)}
</div>
);
}
Pros:
✅ Great SEO
✅ Faster first render
✅ Dynamic data handled easily
Cons:
❌ Higher server cost
❌ Slower than static for heavy traffic
When to use: E-commerce, content-driven websites, SEO-focused apps.
📝 3. Static Site Generation (SSG)
What it is
Pages are built once during deployment and then served as static HTML.
Example (Next.js):
// pages/blog/[id].js
export async function getStaticProps({ params }) {
const res = await fetch(`https://api.example.com/posts/${params.id}`);
const post = await res.json();
return { props: { post } };
}
export async function getStaticPaths() {
const res = await fetch("https://api.example.com/posts");
const posts = await res.json();
return {
paths: posts.map(p => ({ params: { id: p.id.toString() } })),
fallback: false,
};
}
Pros:
✅ Blazing fast (CDN delivery)
✅ Cheap to scale
✅ Great for blogs/docs
Cons:
❌ Rebuild needed for updates
❌ Long build times for huge sites
When to use: Blogs, landing pages, marketing sites.
⏱️ 4. Incremental Static Regeneration (ISR)
What it is
ISR updates static pages on demand, without rebuilding the entire site.
Example (Next.js):
// pages/blog/[id].js
export async function getStaticProps({ params }) {
const res = await fetch(`https://api.example.com/posts/${params.id}`);
const post = await res.json();
return {
props: { post },
revalidate: 60, // Rebuild page every 60s
};
}
Pros:
✅ Combines speed of SSG with freshness of SSR
✅ Perfect for frequently updated content
Cons:
❌ Slight chance of stale data
❌ More infra complexity
When to use: News, product catalogs, content with regular updates.
⚡ 5. Edge-Side Rendering (ESR)
What it is
Rendering happens at edge servers (CDN nodes), closer to the user.
Pros:
✅ Ultra-low latency
✅ Personalization at scale
Cons:
❌ Advanced infra setup
❌ Debugging is harder
When to use: Global-scale apps, personalized landing pages, real-time dashboards.
🚀 6. Streaming SSR
What it is
The server streams HTML chunks progressively instead of waiting for the whole page.
Example (React 18):
import { renderToPipeableStream } from "react-dom/server";
const { pipe } = renderToPipeableStream(<App />, {
onShellReady() {
pipe(res);
},
});
Pros:
✅ Faster perceived performance
✅ Ideal for slow data sources
Cons:
❌ More complex hydration
❌ Limited browser support for some streaming techniques
When to use: E-commerce checkout pages, large content feeds.
💡 7. Partial Hydration / Islands Architecture
What it is
Only interactive parts (“islands”) are hydrated with JavaScript. Static parts remain static.
Tools: Astro, Qwik, Fresh
Pros:
✅ Less JavaScript shipped
✅ Super fast loads
Cons:
❌ New architecture mindset
❌ Tooling still evolving
When to use: Blogs, marketing sites with small interactive widgets.
🌍 8. SPA Pre-rendering (Prerendering)
What it is
An SPA is generated normally, but static HTML snapshots are built for SEO.
Tools: prerender.io, Vite SSR
Pros:
✅ SEO boost for SPAs
✅ Still works offline
Cons:
❌ Limited to static content
❌ Requires rebuilds
When to use: Portfolio sites, small SPAs with SEO needs.
🧩 9. Hybrid Rendering
What it is
Mix and match rendering strategies depending on page type.
Example (Next.js):
- Home page → SSG
- Product detail page → SSR
- Dashboard → CSR
- Blog → ISR
Pros:
✅ Best of all worlds
✅ Flexible and scalable
Cons:
❌ More planning required
When to use: Any large-scale app (e.g., Amazon, Netflix, news portals).
🔮 10. Emerging Techniques
- React Server Components (RSC) → Less JavaScript shipped to the client.
- Edge ISR (on-demand revalidation) → ISR but at the edge.
- Progressive Hydration (PWA style) → Load critical parts first, hydrate rest later.
These are shaping the future of rendering.
📊 Visual Summary
| Technique | Speed | SEO | Cost | Best For |
|---|---|---|---|---|
| CSR | ⚡⚡ | ❌ | Low | SPAs, dashboards |
| SSR | ⚡⚡ | ✅ | Medium | E-commerce, SEO sites |
| SSG | ⚡⚡⚡ | ✅ | Low | Blogs, docs |
| ISR | ⚡⚡⚡ | ✅ | Low-Med | News, product catalogs |
| ESR | ⚡⚡⚡ | ✅ | High | Global apps |
| Streaming SSR | ⚡⚡⚡ | ✅ | Medium | Content-heavy apps |
| Partial Hydration | ⚡⚡⚡ | ✅ | Low | Blogs, SaaS landing pages |
| Prerendering | ⚡⚡ | ✅ | Low | SPAs with SEO |
| Hybrid | ⚡⚡⚡ | ✅ | Medium-High | Large-scale apps |
Top comments (0)