Evolution of Web Rendering: CSR, SSR, SSG, and ISR

1// 1. STATIC SITE GENERATION (SSG) / Default Static Prerender
2// Rendered at build time. Served globally from edge CDN.
3export default async function StaticMarketingPage() {
4  const data = await fetch('https://api.cms.com/about', {
5    // In Next.js 15+, fetch defaults to no-store unless cached explicitly
6    next: { revalidate: false } // or export const dynamic = 'force-static'
7  }).then(res => res.json());
8
9  return <div>{data.headline}</div>;
10}
11
12// 2. INCREMENTAL STATIC REGENERATION (ISR)
13// Stale-while-revalidate: served from CDN cache, revalidated in background every 60s
14export default async function ProductCatalogPage() {
15  const products = await fetch('https://api.store.com/products', {
16    next: { revalidate: 60 } // background regeneration window
17  }).then(res => res.json());
18
19  return <ul>{products.map((p: any) => <li key={p.id}>{p.title}</li>)}</ul>;
20}
21
22// 3. SERVER-SIDE RENDERING (SSR) / Dynamic Request-Time Rendering
23// Runs on every HTTP request on Node.js / Edge server. Ideal for private/auth data.
24import { cookies } from 'next/headers';
25
26export default async function UserDashboard() {
27  const cookieStore = await cookies(); // Accessing dynamic request info triggers SSR
28  const token = cookieStore.get('session')?.value;
29  const user = await fetch('https://api.auth.com/me', {
30    headers: { Authorization: `Bearer ${token}` },
31    cache: 'no-store'
32  }).then(res => res.json());
33
34  return <div>Welcome, {user.name}</div>;
35}