What is SSG?
- React course
- Advanced
- Lesson 6/56
- 4 min
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.
Practice 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.
Starter code
// app/blog/[slug]/page.js
// generateStaticParams ve Page buraya yazSample 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>;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When is SSG preferred?
- Different data per request
- Rarely-changing content Correct answer
- User-specific data
- Real-time data
Explanation: SSG fits rarely-changing content.
2 Static params return
export async function generateStaticParams() {
return [
{ params: { slug: '____' } },
{ params: { slug: 'ikinci' } }
];
}export async function generateStaticParams() {
return [
{ params: { slug: 'ilk' } },
{ params: { slug: 'ikinci' } }
];
}Explanation: generateStaticParams returns a parameter list.
3 What is SSG: match the terms
| Term | Meaning |
|---|---|
SSG |
At build time |
generateStaticParams |
Static routes |
HTML |
Static output |
blog |
Typical SSG |