Static Site Generation
Trailhead's About page says the same thing to every visitor and changes twice a year. Rendering it again for every request would be wasted work. Better to render it once, when the site is built, and hand out copies of that HTML: nothing is faster than a file that already exists.
The rule
Same for everyone? Render once at build, then refresh on a timer.
With static site generation (SSG), also called static rendering or prerendering, Next.js runs your components during next build and saves the HTML. Every visitor gets that saved result, and it can be served from a CDN close to them.
In the App Router, static is the default. A route that uses no request-time inputs (no searchParams, cookies, headers or no-store fetches) is prerendered automatically. next build reports what it decided:
Route (app)
┌ ○ /about
├ ƒ /trails
└ ● /trails/[slug]
○ (Static) prerendered as static content
● (SSG) prerendered as static HTML (uses generateStaticParams)
ƒ (Dynamic) server-rendered on demandFor a dynamic segment, tell Next.js which values to build ahead with generateStaticParams:
// app/trails/[slug]/page.tsx
export async function generateStaticParams() {
const trails = await getTrails();
return trails.map((t) => ({ slug: t.slug }));
}
export const revalidate = 86400; // rebuild at most once a dayrevalidate adds incremental static regeneration: once the page is older than the given number of seconds, the next visitor still gets the saved copy instantly, while Next.js rebuilds it in the background. Later visitors get the fresh one. Static speed, with data that does not go stale forever.
The shortcut
For each page ask two questions: "Is it the same for every visitor?" and "How often does it change?" Different per visitor: dynamic. Same and rarely changes: static. Same but changes now and then: static plus revalidate.
About
Same for everyone, changes twice a year. Static (○).
The trap is expecting a static page to update the moment the data changes. Without revalidate (or a rebuild) it shows what existed at build time.
Drills
Answer fast — trust the rule.
When is a statically generated page's HTML created?
What does generateStaticParams return for app/trails/[slug]/page.tsx?
With export const revalidate = 3600, a visitor arrives two hours after the page was built. What do they see?
In next build output, what does ƒ next to a route mean?
Which Trailhead page should NOT be statically generated?
Remember
- Same for everyone? Render once at build; add
revalidateto refresh it on a timer. - Shortcut: "same for everyone?" and "how often does it change?" pick the strategy.
- Trap: a static page without revalidation keeps showing build-time data.