SSG

Static Site Generation

Updated September 30, 20262 min read

In short

SSG is a technique that renders a website's pages to plain HTML files at build time, so servers or CDNs can deliver them instantly without extra work.

What is SSG?

With static site generation, a build tool runs your templates or components once, before deployment, fetches any data they need, and writes out finished HTML, CSS, and JavaScript files. Those files are uploaded to a web server or CDN, which simply hands the same prebuilt page to every visitor.

Because no application code runs per request, static pages are very fast, cheap to host, and hard to overload during traffic spikes. SSG suits content that changes rarely and is the same for everyone, such as documentation, blogs, marketing pages, and glossaries. Tools such as Astro, Hugo, Eleventy, and Next.js support it.

SSG is like printing a batch of brochures in advance instead of writing each one by hand when a customer asks. The downside is that any change requires a rebuild, which can be slow for very large sites, so some frameworks offer incremental regeneration that rebuilds individual pages in the background.

SSG differs from SSR in timing: SSG renders at build time, while SSR renders on every request. Static pages can still be interactive, because JavaScript can hydrate them in the browser, and client-side rendering (CSR) can fill in personalized parts such as a user menu after the page loads.

Key takeaways

SSG renders pages to HTML files once, at build time.
Every visitor receives the same prebuilt files, often from a CDN.
Static pages are fast, cheap to host, and easy to scale.
Content updates require a rebuild or incremental regeneration.
SSG renders at build time; SSR renders at request time.

Example

A tiny static site generator in Node.jsjavascript

import { mkdir, writeFile } from "node:fs/promises";

// Runs once at build time, not on every request
// (getAllPosts and escapeHtml are helpers defined elsewhere)
const posts = await getAllPosts();
await mkdir("dist/posts", { recursive: true });

for (const post of posts) {
  const html = `<h1>${escapeHtml(post.title)}</h1><p>${escapeHtml(post.text)}</p>`;
  // Each page becomes a plain HTML file that a CDN can serve as is
  await writeFile(`dist/posts/${post.slug}.html`, html);
}

Readers ask

What is the difference between SSG and SSR?

SSG builds each page's HTML once at build time and serves the same file to every visitor, while SSR builds the HTML on the server for each request. SSG is faster and cheaper to serve; SSR suits content that is personalized or changes constantly.

Can a static site have dynamic features?

Yes. A statically generated page can load JavaScript that fetches data, handles forms, or shows personalized content in the browser, and serverless functions can handle tasks such as search or payments.

What is incremental static regeneration?

Incremental static regeneration, or ISR, is a feature in some frameworks that rebuilds individual static pages in the background after a set time or on demand. It keeps most of the speed of SSG without rebuilding the whole site for every change.

Often compared

SSG vs SSRSSG builds each page into HTML once, at build time, and serves the same file to everyone, while SSR builds the HTML on every request, so it can show fresh data.

SSG