← Lessons

quiz vs the machine

Gold1370

System Design

Static Site Generation and Edge Caching

Prebuilding pages and serving them from the edge for speed and scale.

5 min read · core · beat Gold to climb

Build Once, Serve Many

Static site generation renders pages to plain HTML at build time rather than on each request. Those files are then pushed to the edge, so users get a prebuilt page with no server work per visit.

Why It Is Fast

  • No render on request since the HTML already exists
  • Edge cached so pages serve from a nearby node
  • Cheap to scale because static files handle huge traffic easily
  • Resilient since there is no app server in the hot path

Handling Change

Pure static content goes stale when data changes. Modern approaches blend strategies.

  • Rebuild on deploy regenerates the whole site
  • Incremental regeneration rebuilds only changed pages on demand
  • Stale while revalidate serves the old page instantly while refreshing in the background

Trade Offs

Static generation suits content that changes slowly, like docs and marketing pages. Highly personalized or real time pages need dynamic rendering, often combined with edge compute.

Key idea

Static site generation prebuilds pages to HTML served from the edge for speed, scale, and resilience, using incremental regeneration and stale while revalidate to keep slowly changing content fresh.

Check yourself

Answer to earn rating on the learn ladder.

1. Why is a statically generated, edge cached site fast and scalable?

2. What does stale while revalidate do?

3. Which content best suits static site generation?