Roadmap › Next.js — App Router, Folder Structure, Rendering and Full Stack with SQL Server › Module: Rendering, Data and Caching
Lessons in this course (8)
3. Rendering strategies — static, dynamic, streaming, ISR and PPR
Intermediate★ Must knowLesson 3 of 8
| Strategy | When HTML is produced | Use |
|---|---|---|
| Static (SSG) | At build time (generateStaticParams for dynamic routes) | Marketing pages, docs, blogs, product catalogs that change rarely |
| ISR / revalidation | Static, regenerated after a time (export const revalidate = 60) or on demand (revalidatePath) | Catalogs, news |
| Dynamic (SSR) | On every request (uses cookies/headers/searchParams or uncached data) | Personalised dashboards, carts |
| Streaming | Shell first, slow parts stream later via <Suspense>/loading.tsx | Pages with slow data |
| Partial Prerendering (Cache Components) | Static shell prerendered; dynamic holes stream in | Best of both on one page (Next 16) |
| Client-side rendering | In the browser (Client Components + fetch/SWR/React Query) | Highly interactive widgets |
tsx
// Static generation of all product pages at build time
export async function generateStaticParams() {
return (await listProducts()).map((p) => ({ id: String(p.id) }));
}
export const revalidate = 3600; // re-generate at most once per hour