Back
Interactive Explainer

SSR vs SSG vs CSR

When to render on server, at build time, or in the browser.

🎯Key Takeaways
CSR, SSR, SSG: different trade-offs.
SSG/SSR for SEO and first paint.
Hybrid and streaming per route.

SSR vs SSG vs CSR

When to render on server, at build time, or in the browser.

~2 min read
Be the first to complete!
What you'll learn
  • CSR, SSR, SSG: different trade-offs.
  • SSG/SSR for SEO and first paint.
  • Hybrid and streaming per route.

CSR, SSR, SSG

CSR (Client-Side Rendering): the server sends a minimal HTML shell and JS; the browser runs the app and renders the UI. Fast navigation after load; first paint and SEO depend on JS. SSR (Server-Side Rendering): the server renders HTML per request; the client hydrates to make it interactive. Good first paint and SEO; needs a server per request.

SSG (Static Site Generation): HTML is generated at build time and served as static files. Cheapest and fastest; no server at request time. Good for content that does not change per user or request. Revalidate (ISR) or on-demand to update content.

Hybrid and streaming

Frameworks like Next.js let you choose per route: some pages SSG, some SSR, some CSR. Streaming (e.g. React Server Components) sends HTML in chunks so the shell and above-the-fold content can appear before the rest is ready, improving LCP.

Use SSG for marketing and docs; SSR for personalized or dynamic pages that need good first paint; CSR for highly interactive dashboards or tools where SEO is less critical.

Choosing a strategy

Need SEO or fast first paint? Prefer SSG or SSR so crawlers and users see content without waiting for JS. Mostly interactive app, behind login? CSR is fine. Cost and ops: SSG is the cheapest (static hosting); SSR needs a running server; CSR needs a server for the shell and API.

[Building Micro-Frontends](https://www.oreilly.com/library/view/building-micro-frontends/9781492082996/) for deployment and composition across apps.

Key takeaways

  • CSR, SSR, SSG: different trade-offs.
  • SSG/SSR for SEO and first paint.
  • Hybrid and streaming per route.

Related concepts

Explore topics that connect to this one.

Suggested next

Often learned after this topic.

Deployment strategies

Ready to see how this works in the cloud?

Switch to Career Paths for structured paths (e.g. Developer, DevOps) and provider-specific lessons.

View role-based paths

Sign in to track your progress and mark lessons complete.

Continue learning

Deployment strategies

Discussion

Questions? Discuss in the community or start a thread below.

Join Discord

In-app Q&A

Sign in to start or join a thread.