Every web framework makes you choose how pages are rendered. Here’s what each strategy means and when to use it.

The three strategies

CSR (Client-Side Rendering) — the browser downloads an empty HTML page + JavaScript. JavaScript renders everything.

Server sends: <div id="root"></div> + bundle.js
Browser: downloads JS → executes JS → renders page
User sees: blank screen → loading spinner → content

SSR (Server-Side Rendering) — the server renders the full HTML on every request.

Server: receives request → renders HTML → sends complete page
Browser: receives full HTML → shows content immediately → hydrates JS
User sees: content immediately

SSG (Static Site Generation) — HTML is generated at build time, served as static files.

Build time: generates all HTML pages
Server: serves pre-built HTML files (like a CDN)
Browser: receives full HTML → shows content immediately
User sees: content immediately (fastest)

Comparison

	CSR	SSR	SSG
First load speed	Slow (download + execute JS)	Fast (HTML ready)	Fastest (pre-built)
SEO	Bad (empty HTML)	Good	Good
Server cost	Low (static files + API)	Higher (renders per request)	Lowest (CDN)
Dynamic content	Yes	Yes	Limited (rebuild needed)
Time to interactive	Slow	Medium (hydration)	Fast
Best for	Dashboards, SPAs	Dynamic pages, e-commerce	Blogs, docs, marketing

When to use each

CSR — Client-Side Rendering:

• Dashboards and admin panels (behind login, SEO doesn’t matter)
• Highly interactive apps (real-time collaboration, chat)
• When the page is mostly JavaScript anyway

SSR — Server-Side Rendering:

• E-commerce product pages (SEO + dynamic pricing)
• Social media feeds (personalized, SEO matters)
• Pages that change per user but need to be indexed

SSG — Static Site Generation:

• Blogs and content sites (this site!)
• Documentation
• Marketing and landing pages
• Any page that’s the same for every visitor

The modern approach: mix and match

Most frameworks let you use different strategies per page:

• Next.js — SSR, SSG, and CSR per page
• Astro — SSG by default, SSR opt-in
• Nuxt — SSR by default, SSG opt-in
• SvelteKit — SSR by default, SSG opt-in

You don’t have to pick one. Your blog posts can be SSG, your dashboard can be CSR, and your product pages can be SSR — all in the same app.

See also: What is Next.js? | What is Astro? | Next.js vs. Astro