What is SSG?

Learn the concept of static site generation.

What is SSG?

SSG (Static Site Generation) means the page is rendered once at build time and saved as static HTML. Each request serves the same HTML; the server does no extra work.

SSG is the fastest option for rarely-changing content. Blog posts, marketing pages and docs fit SSG.

In Next.js App Router, generateStaticParams makes dynamic routes static too.

generateStaticParams

For dynamic routes, the generateStaticParams function tells Next.js which parameters to pre-render at build time. For example, in app/blog/[slug]/page.js you return a list.

Each element is a { params: { slug: '...' } } object. Next.js builds one HTML per slug.

The first request gets the ready HTML; nothing else is needed.

Exercise Static blog page

Write generateStaticParams that returns [{ params: { slug: 'react' } }, { params: { slug: 'css' } }]. Write a Page component: destructure { params }, render <h1>{params.slug}</h1>. export default Page.

Show example solution

// app/blog/[slug]/page.js
export async function generateStaticParams() {
  return [
    { params: { slug: "react" } },
    { params: { slug: "css" } }
  ];
}

export default function Page({ params }) {
  return <h1>{params.slug}</h1>;
}

Test yourself

When is SSG preferred?
- Different data per request
- Rarely-changing content
- User-specific data
- Real-time data
Show answer

Rarely-changing content — SSG fits rarely-changing content.

Static params return

export async function generateStaticParams() {
  return [
    { params: { slug: '____' } },
    { params: { slug: 'ikinci' } }
  ];
}

Show answer

export async function generateStaticParams() {
  return [
    { params: { slug: 'ilk' } },
    { params: { slug: 'ikinci' } }
  ];
}

What is SSG: match the terms

SSG

At build time
generateStaticParams

Static routes
HTML

Static output
blog

Typical SSG

Next lesson: Server Components

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies