Learn the concept
Rendering Strategies
SSG (Static Site Generation) generates HTML at build time for fast, cacheable pages; SSR (Server-Side Rendering) generates HTML on each request for dynamic, real-time content.
Static Site Generation (SSG):
Server-Side Rendering (SSR):
App Router (Recommended): In the App Router, components are Server Components by default. Rendering strategy is determined by data access patterns:
cookies(), headers(), searchParams, or connection() → rendered per request"use cache" directive to explicitly cache component outputChoosing Between Them:
"use cache" with cacheLife()Incremental Static Regeneration (ISR):
revalidateNote: In Next.js 16, fetch requests are not cached by default. Caching is opt-in via the "use cache" directive.
// app/posts/[id]/page.tsx — App Router (recommended)
type Props = {
params: Promise<{ id: string }>;
};
// Static Generation — use generateStaticParams
export async function generateStaticParams() {
const posts = await fetch('https://api.example.com/posts').then(r => r.json());
return posts.map((post: { id: number }) => ({
id: post.id.toString(),
}));
}
export default async function PostPage({ params }: Props) {
const { id } = await params;
const post = await fetch(`https://api.example.com/posts/${id}`);
return <article>{post.title}</article>;
}
// For dynamic (SSR) — access dynamic APIs
import { cookies } from 'next/headers';
export default async function DashboardPage() {
const cookieStore = await cookies(); // Makes this route dynamic
const token = cookieStore.get('token');
const data = await fetchDashboard(token);
return <div>{data.content}</div>;
}Statically generate article pages at build time, then use ISR to refresh them periodically. Breaking news pages use dynamic rendering for real-time updates.
Use SSR (dynamic rendering via `cookies()`) for user-specific dashboards that show personalized data, recommendations, and settings on every request.
Pre-render landing pages, pricing, and feature pages at build time for instant loads and CDN caching. Content teams update via CMS with on-demand revalidation.
Build an app with three pages demonstrating each rendering strategy: a static About page (SSG), a dynamic User Profile page (SSR via cookies), and a cached Products page (`"use cache"` with `cacheLife`). Show timestamps to prove when each was rendered.
Build a store where product listing pages are statically generated with `generateStaticParams`, product detail pages use `"use cache"` with hourly revalidation, and the shopping cart uses dynamic rendering for personalization.
Tripadvisor uses a hybrid rendering approach — static generation for destination guides and SEO pages, with server-side rendering for personalized search results and user reviews.
The Washington Post uses incremental static regeneration for news articles, allowing pages to be served from CDN while automatically updating when new content is published.