Stop 11 · Next.jsTopics · 5/16

SSG

In short

Static generation builds your pages once, when you deploy. After that, every visitor gets ready-made HTML, which is about as fast as the web gets.

Static Site Generation — pages are pre-rendered to HTML once at build time, then served instantly from a CDN — ideal for content that doesn't change per request.

The jaadu stands by a printing press as bundles of picture-only newspapers stack up.

Think of it like this

Printing the morning newspaper

The newspaper is printed overnight and thousands of copies go out at 5 am. Nobody prints your copy when you ask for it. SSG prints your pages at build time, and a CDN hands copies to everyone instantly.

Watch it happen

From next build to a visitor in Pune

next build

Get slugs

Render HTML

CDN

Visitor

1/5You deploy, and next build starts. This is the only time the page code runs.

The big ideas

What you need to know

Built at build time

next build renders the page to HTML once. No server work happens per visitor.

CDN friendly

Static files can be cached on servers worldwide, so a visitor in Patna and one in Pune both get it fast.

generateStaticParams

For dynamic routes like /blog/[slug], this function lists which slugs to prebuild.

Static unless you opt out

Pages that don't read cookies, headers or searchParams are prerendered at build by default.

See it in code

Walk through the code

tsx

1// app/blog/[slug]/page.tsx2import { getAllPosts, getPost } from "@/lib/posts";3 4export async function generateStaticParams() {5  const posts = await getAllPosts();6  return posts.map((p) => ({ slug: p.slug }));7}8 9export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {10  const { slug } = await params;11  const post = await getPost(slug);12  return <article><h1>{post.title}</h1><p>{post.body}</p></article>;13}

1/3Runs at build time and lists every slug to prebuild.

At build time, Next.js calls generateStaticParams, then renders one HTML page per slug. params is a Promise in Next.js 15+, so await it.

Save yourself the pain

Common mistakes

Oops

Using SSG for stock prices or live cricket scores.

Do this instead

Static pages only change when you rebuild. Use ISR or dynamic rendering for data that keeps changing.

Oops

Reading params.slug directly without await.

Do this instead

In Next.js 15 and later, write const { slug } = await params.

Your mission

Prebuild five pages

~25 min

Quick check

When does a statically generated page get its HTML?

Go deeper

1Build a blog page using SSG (`generateStaticParams` in App Router).
2Compare page load speed of an SSG page against an SSR one.
3Learn why SSG is the fastest and cheapest rendering strategy when data allows it.