Next.js 16 的渲染策略（SSG/ISR/SSR）与 动态渲染（CSR） 的核心区别在于：渲染地点（服务器/浏览器）、渲染时机（构建时/请求时/浏览器加载后）、数据实时性与 SEO 能力。下面从定义、机制、用法与场景逐一说明，并附对比表。

一、四种渲染策略核心定义

1. SSG（Static Site Generation，静态生成）

• 时机：npm run build 构建时一次性生成所有页面 HTML。
• 环境：服务器/构建机，产物为静态 HTML+JS+CSS，可直接 CDN 分发。
• 数据：构建时获取，部署后默认不变，需重新构建更新。
• 特点：最快首屏（TTFB<50ms）、SEO 完美、零服务器压力。
• 适用：博客、文档、官网、营销页（内容不常变）。
• App Router 默认：无动态数据依赖时自动 SSG。

// app/page.tsx（SSG默认）
export default function Home() {
  return <h1>静态页面（构建时生成）</h1>;
}

2. ISR（Incremental Static Regeneration，增量静态再生）

• 时机：构建时生成 → 访问后后台定时/按需重新生成（不阻塞用户）。
• 环境：同 SSG，静态 HTML 为主，后台异步更新。
• 数据：准实时（有更新窗口，如 60 秒），无需全量重构。
• 特点：SSG 速度+SSR 实时性折中、SEO 优秀、CDN 友好。
• 适用：商品详情、新闻列表、内容站（周期性更新）。
• 配置：revalidate 时间驱动，或 revalidatePath 事件驱动。

// app/posts/[slug]/page.tsx（ISR）
export const revalidate = 60; // 60秒后后台再生
export default async function Post({ params }) {
  const { slug } = params;
  const data = await fetch(`/api/posts/${slug}`).then(r => r.json());
  return <article>{data.content}</article>;
}

3. SSR（Server-Side Rendering，服务端渲染）

• 时机：每次用户请求时，服务器实时渲染 HTML 并返回。
• 环境：服务器（Node.js/Edge Runtime），请求触发执行。
• 数据：实时最新（每次请求拉取），支持登录态/个性化。
• 特点：SEO 优秀、首屏直出、动态内容强；但 TTFB 较慢（100–500ms）、服务器有压力。
• 适用：实时资讯、用户仪表盘、电商页（强实时/个性化）。
• 配置：dynamic: 'force-dynamic' 或无 generateStaticParams。

// app/dashboard/page.tsx（SSR）
export const dynamic = 'force-dynamic'; // 强制SSR
export default async function Dashboard() {
  const user = await getCurrentUser(); // 每次请求获取当前用户
  return <div>欢迎，{user.name}</div>;
}

4. 动态渲染（CSR，Client-Side Rendering，客户端渲染）

• 时机：服务器返回空 HTML 壳，浏览器加载 JS 后动态渲染。
• 环境：纯浏览器，无服务器渲染参与。
• 数据：浏览器端fetch/axios拉取，完全动态。
• 特点：交互最强、服务器零压力；但首屏慢、SEO 差（爬虫可能看不到内容）。
• 适用：后台管理、强交互 SPA、用户中心（无需 SEO）。
• 配置：Next.js 中需手动禁用服务端渲染，或用useEffect客户端取数。

// app/admin/page.tsx（CSR）
'use client'; // 客户端组件
import { useEffect, useState } from 'react';
export default function Admin() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/admin').then(r => r.json()).then(setData);
  }, []);
  return <div>{data ? '管理面板' : '加载中...'}</div>;
}

二、关键区别对比表

三、Next.js 16 关键增强（App Router）

1. Server Components（默认）：组件默认在服务端运行，零客户端 JS，直接查数据库/文件系统，进一步提升 SSG/ISR/SSR 性能。
2. Streaming（流式渲染）：SSR/ISR 支持分块发送 HTML，浏览器边收边渲染，首屏更快（React 18+）。
3. PPR（Partial Prerendering，部分预渲染）：静态部分预渲染，动态部分流式加载，SSG 速度+SSR 动态性的极致折中（Next.js 16 稳定）。

四、如何选择？

• 内容稳定、重 SEO/首屏 → SSG（首选）
• 周期性更新、兼顾速度与实时 → ISR（次选）
• 强实时/个性化、登录态 → SSR
• 强交互、无 SEO 需求 → 动态渲染（CSR）