Static (SSG) vs Dynamic (SSR) Rendering & generateStaticParams0%
Server Actions ("use server"): Type-Safe Mutations Without API Endpoints

Static (SSG) vs Dynamic (SSR) Rendering & generateStaticParams

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Static (SSG) vs Dynamic (SSR) Rendering & generateStaticParams

Next.js automatically determines whether a route should be rendered statically at build time (Static Site Generation - SSG) or dynamically on every user request (Server-Side Rendering - SSR). For dynamic routes with parameters, generateStaticParams unlocks blazing static performance.

1. Static vs Dynamic Rendering

  • Static Rendering (Default): Routes are rendered into HTML at build time (npm run build) or during background revalidation. Resulting files are cached globally on edge CDNs for near-zero millisecond response times.
  • Dynamic Rendering: Routes are rendered on the server for each individual user request. Automatically triggered when using Dynamic Functions (cookies(), headers(), searchParams).

2. Dynamic Functions Triggering Dynamic Rendering

If a component uses information specific to an incoming user request, Next.js automatically opts that route into Dynamic Rendering:

  • cookies() from next/headers
  • headers() from next/headers
  • Accessing searchParams in page.tsx
TSX
import { cookies } from 'next/headers';
 
export default async function UserCartPage() {
const cookieStore = await cookies();
const cartToken = cookieStore.get('cart_token'); // Dynamic function forces SSR!
 
return <div>Your Cart Token: {cartToken?.value}</div>;
}

3. Prerendering Dynamic Routes with generateStaticParams

For dynamic paths like app/courses/[slug]/page.tsx, Next.js doesn't know what slugs exist at build time unless you specify them. generateStaticParams queries your database during build time to generate static HTML pages for all known slugs!

TSX
// app/courses/[slug]/page.tsx
import { getAllCourseSlugs, getCourseBySlug } from '@/lib/courses';
import { notFound } from 'next/navigation';
 
// 1. generateStaticParams: runs at build time on the server
export async function generateStaticParams() {
const slugs = await getAllCourseSlugs(); // e.g. ['tailwind-css', 'nodejs-backend']
 
return slugs.map((slug) => ({
slug: slug
}));
}
 
// 2. Page Component: statically generated for all returned slugs!
export default async function CourseDetailPage({
params
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const course = await getCourseBySlug(slug);
 
if (!course) notFound();
 
return (
<div className="max-w-4xl mx-auto py-10">
<h1 className="text-4xl font-bold">{course.title}</h1>
<p className="mt-4 text-slate-600">{course.description}</p>
</div>
);
}

4. The Dynamic Params Option (dynamicParams)

Control what happens when a user visits a dynamic slug that was NOT generated at build time:

TypeScript
// true (default): Next.js will render the new slug dynamically on demand and cache it!
// false: Next.js returns an immediate 404 for any slug not returned by generateStaticParams.
export const dynamicParams = true;
Interactive Quiz

Multiple Choice Questions

Question 1
What does the generateStaticParams function do in dynamic routes?
Question 2
What happens if a component uses cookies() or headers() from next/headers?
Question 3
What does setting export const dynamicParams = false; in a page do?
Question 4
What is the primary advantage of Static Site Generation (SSG) over Dynamic Server-Side Rendering (SSR)?
Question 5
Which symbol in the npm run build output indicates that a route has been statically pre-rendered?
Next Lesson

Server Actions ("use server"): Type-Safe Mutations Without API Endpoints

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
The Next.js 15 Caching System: Request Memoization & Data CacheServer Actions ("use server"): Type-Safe Mutations Without API Endpoints

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext