Static Site Generation (SSG)

🔍 What Is It?

Static Site Generation (SSG) pre-renders pages to HTML at build time (next build). The HTML files are:

• →Stored and served from a CDN
• →Identical for every user (no personalisation)
• →Blazing fast — no server processing per request
• →Infinitely scalable — CDN handles any traffic spike

In the App Router, SSG is the default. A route is static unless it:

• →Reads cookies() or headers()
• →Uses searchParams
• →Calls fetch with cache: 'no-store'
• →Exports dynamic = 'force-dynamic'

For dynamic routes (/blog/[slug]), use generateStaticParams to tell Next.js which slugs to pre-build.

🎯 Why Do We Need It?

SSG is the fastest possible way to serve web content:

• →No server cost per request — CDN serves a file, no compute needed
• →Sub-50ms response times — CDN edge nodes are geographically close to users
• →Infinite scalability — CDN absorbs traffic spikes without autoscaling
• →No database at request time — database is only queried at build time
• →Perfect SEO — full HTML available for crawlers immediately

For content that doesn't change per user (marketing pages, blog posts, docs, product listings), SSG is almost always the right choice.

🏗️ What Happens in Real Projects?

SSG in a real e-commerce platform:

• →/ — homepage with featured products (SSG, rebuilt on deploy)
• →/products — product listing (SSG + ISR, revalidated hourly)
• →/products/[slug] — each product page (SSG with generateStaticParams)
• →/blog — blog listing (SSG, rebuilt on new post)
• →/blog/[slug] — each blog post (SSG, rebuilt on edit)
• →/about, /pricing, /contact — pure static HTML

A large e-commerce site might pre-build 500,000 product pages. Next.js handles this with parallel build workers.

⚙️ How It Works

SSG build pipeline:

1. next build starts
2. Next.js identifies static routes (no dynamic dependencies)
3. For dynamic routes, it calls generateStaticParams to get all slugs
4. It renders each route as an async Server Component, fetching data
5. Outputs HTML files + RSC payloads for each route
6. At runtime, CDN serves the pre-built files instantly

generateStaticParams:

export async function generateStaticParams() {
  const products = await db.product.findMany({ select: { slug: true } });
  return products.map((p) => ({ slug: p.slug }));
}

Next.js calls this at build time to know which dynamic routes to pre-render.

💻 Example

SSG with Dynamic Routes — Pre-building a blog with dynamic slugs using generateStaticParams.

import { notFound } from 'next/navigation';
import { db } from '@/lib/db';
import type { Metadata } from 'next';

interface Props {
  params: { slug: string };
}

// Tell Next.js which slugs to pre-build at build time
export async function generateStaticParams() {
  const posts = await db.post.findMany({
    select: { slug: true },
    where: { published: true },
  });
  return posts.map((post) => ({ slug: post.slug }));
}

// Generate metadata per page (also at build time)
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await db.post.findUnique({ where: { slug: params.slug } });
  return {
    title: post?.title ?? 'Post Not Found',
    description: post?.excerpt,
  };
}

export default async function BlogPostPage({ params }: Props) {
  const post = await db.post.findUnique({
    where: { slug: params.slug },
  });

  if (!post) notFound();

  return (
    <article>
      <h1>{post.title}</h1>
      <time>{post.publishedAt.toLocaleDateString()}</time>
      <div dangerouslySetInnerHTML={{ __html: post.contentHtml }} />
    </article>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits