Last updated: Apr 29, 2026

Static Site Generation

A build step runs the application once for every known route, produces an HTML file for each, and outputs a directory of static assets. These files are deployed to a CDN or static host and served directly — no server-side computation happens at request time.

How It Works

┌──────────┐        ┌───────┐       ┌──────────┐
│  Build   │        │  CDN  │       │ Browser  │
└────┬─────┘        └───┬───┘       └────┬─────┘
     │── .html files ──→│                │
     │                   │←── request ── │
     │                   │── HTML ─────→ │
     │                   │               │ paint + hydrate

Next.js Example

Pages that export getStaticProps are statically generated:

import type { GetStaticPaths, GetStaticProps } from "next";

export const getStaticPaths: GetStaticPaths = async () => {
  const posts: Post[] = await fetchPosts();
  return {
    paths: posts.map((p) => ({ params: { id: p.id } })),
    fallback: false,
  };
};

export const getStaticProps: GetStaticProps<{ post: Post }> = async ({
  params,
}) => {
  const post = await fetchPost(params!.id as string);
  return { props: { post } };
};

SSG works best when content is known at build time and does not change between deployments. For sites where most content is static but a few pages need fresh data, Incremental Static Generation extends SSG with on-demand revalidation.

Trade-offs