Demo

Static Rendering & ISR

Static Generation (SSG) pre-renders pages at build time for maximum performance.
Use generateStaticParams to define which dynamic routes to pre-render.
ISR combines static performance with the ability to update content without redeploying.
Set export const revalidate = N to enable time-based revalidation.
Use dynamicParams to control behavior for slugs not in generateStaticParams.
Static pages are served from CDN edge locations for minimal latency.

app/blog/[slug]/page.tsx

1export async function generateStaticParams() {
2  const posts = await getPosts();
3  return posts.map((post) => ({ slug: post.slug }));
4}
5
6// Time-based revalidation (ISR)
7export const revalidate = 3600; // 1 hour
8
9// Reject unknown slugs with 404
10export const dynamicParams = false;
11
12export default async function BlogPost({
13  params,
14}: {
15  params: Promise<{ slug: string }>;
16}) {
17  const { slug } = await params;
18  const post = await getPost(slug);
19  return <Article post={post} />;
20}

Static vs Dynamic Rendering

Aspect	Static (SSG)	ISR	Dynamic (SSR)
Built	Once at deploy	Build + background	Every request
Speed	Fastest (CDN)	Fast (cached)	Slowest (origin)
Freshness	Stale until redeploy	Configurable	Always fresh
Use case	Docs, marketing	Blog, e-commerce	Dashboards

Demo

Review the comparison table to understand when to use each strategy.
Check the static pages example showing generateStaticParams usage.
Explore ISR options for time-based and on-demand revalidation.
Understand fallback behavior with dynamicParams settings.

Visual Summary

ISR revalidation cycle

Build

Serve cached

Stale request

Background regen

Fresh cache

Users always get fast cached responses while regeneration happens in background.

Key Takeaways

Topic	Guidance
Performance	Static pages load fastest from edge CDN
Freshness	Use ISR revalidate for content that changes
Build time	generateStaticParams runs at build, not runtime
Fallback	dynamicParams controls unknown slug behavior

Pitfalls and Tips

Return all possible slugs from generateStaticParams for full static generation.
Use dynamicParams = false for strict static-only sites.
Combine ISR with on-demand revalidation for immediate updates when needed.
Check build output to verify which routes are static vs dynamic.

Continue Learning

Demo	Description
Dynamic Routes	Create routes from dynamic data
Revalidation	Update static content on-demand
Partial Prerendering	Mix static and dynamic in one route

Learn More

layout.tsx

Rendering Strategies Comparison (Server)

Strategy	When Built	Updates	Best For
Static (SSG)	Build time only	Requires new deploy	Marketing pages, docs
ISR	Build + background	Time or on-demand	Blog, e-commerce
Dynamic (SSR)	Every request	Always fresh	Dashboards, user data

Static Pages (SSG)

Pre-rendered at Build Time

These pages are generated once and served from CDN

Getting Started with Next.js

15,234 views

/getting-started

Understanding the App Router

12,456 views

/app-router

React Server Components

9,876 views

/server-components

app/blog/[slug]/page.tsxtsx

Incremental Static Regeneration (ISR)

Static with Background Updates

Pages revalidate in the background after a time interval

Time-based ISR

Revalidates every 60 seconds

export const revalidate = 60;

On-demand ISR

Revalidates via API/webhook

revalidatePath('/blog/post')

ISR Behavior

Serves cached HTML, revalidates in background after interval

Dynamic Segments Fallback

Handling Unknown Slugs

Control behavior for paths not in generateStaticParams

dynamicParams: true

Render on-demand (default)

dynamicParams: false

Return 404 for unknown

loading.tsx

Show skeleton while generating

Build Output Preview (Server)

During next build, you see which routes are static, dynamic, or ISR: