← Lessons

quiz vs the machine

Silver1080

Frontend

Rendering Strategies: CSR, SSR, SSG, ISR

Where and when your HTML gets built shapes speed, freshness, and cost.

6 min read · intro · beat Silver to climb

The four strategies

Every page has to turn data into HTML somewhere. The choice is where that happens and when.

  • CSR (Client Side Rendering): the server sends a near empty shell plus JavaScript. The browser fetches data and builds the page. Fast to deploy, but slow first paint and bad for crawlers.
  • SSR (Server Side Rendering): the server builds full HTML on every request. Fresh data and good SEO, but each request costs server work.
  • SSG (Static Site Generation): HTML is built once at build time and served from a CDN. Blazing fast and cheap, but stale until you rebuild.
  • ISR (Incremental Static Regeneration): static pages that rebuild in the background after a set interval, blending SSG speed with eventual freshness.

Choosing

  • Marketing and docs that rarely change suit SSG.
  • A dashboard with per user data suits SSR or CSR.
  • A blog or catalog that updates hourly suits ISR.

Many apps mix strategies per route rather than picking one globally.

Key idea

The rendering strategy trades freshness, speed, and server cost by deciding where and when HTML is produced.

Check yourself

Answer to earn rating on the learn ladder.

1. Which strategy serves prebuilt HTML from a CDN but can be stale until rebuilt?

2. What does ISR add on top of SSG?