动态渲染 (SSR)

🔄 什么是动态渲染？

动态渲染（Server-Side Rendering，SSR）是在每次请求时在服务器渲染页面。每个用户/每次请求都会获得最新的内容，适合需要实时数据或个性化内容的场景。

核心特性：

每次请求都在服务器渲染
可以访问请求特定数据（headers、cookies、searchParams）
内容始终是最新的
需要 Node.js 服务器
可以展示用户个性化内容

⚡ 什么会触发动态渲染？

1️⃣ 使用 Dynamic APIs

headers(), cookies(), searchParams

使用任何一个 Dynamic API 都会自动触发动态渲染

2️⃣ 明确配置

export const dynamic = 'force-dynamic';

在页面或布局中导出 dynamic 配置

3️⃣ 使用 cache: 'no-store'

fetch(url, { cache: 'no-store' })

fetch 使用 no-store 选项会触发动态渲染

📊 动态数据

标题：

动态渲染页面

描述：

这个页面每次请求都会重新渲染

渲染时间：

2025-12-27T12:37:08.638Z

✅ 每次刷新都会变化（证明每次都重新渲染）

请求计数：

222

✅ 每次刷新都是新的随机数

User-Agent：

Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.c

✅ 从 headers() 获取（触发动态渲染）

🧪 如何验证动态渲染？

查看构建输出：
pnpm build
在构建日志中，这个页面会显示为：
ƒ /rendering-test/dynamic
ƒ 表示动态渲染（Dynamic/SSR）
多次刷新页面：
渲染时间和请求计数每次都会变化（每次都重新渲染）
查看终端日志：
每次访问页面，都会打印新的 [DYNAMIC RENDERING] 日志
查看页面源代码：
右键 → 查看页面源代码，可以看到服务端渲染的完整 HTML（包括当前的时间戳）
对比 Network 面板：
Document 类型的请求大小通常比静态页面大（因为包含了动态数据）

💡 适用场景

✅ 适合

用户个性化内容（用户名、购物车）
实时数据（股票、新闻、天气）
需要认证的页面（仪表盘）
基于请求的内容（IP、语言）
搜索结果页面

❌ 不适合

内容不变的页面
流量大且内容相同的页面
营销页面、落地页
博客文章、文档
对性能要求极高的页面

💻 代码示例

// app/dashboard/page.tsx
import { cookies, headers } from 'next/headers';

// 方法 1：明确指定动态渲染
export const dynamic = 'force-dynamic';

export default async function Dashboard() {
  // 方法 2：使用 Dynamic API（自动触发动态渲染）
  const cookieStore = await cookies();
  const headersList = await headers();
  const userId = cookieStore.get('userId');
  
  // 每次请求都执行
  const userData = await fetchUserData(userId);
  
  return (
    <div>
      <h1>Welcome, {userData.name}!</h1>
      <UserStats data={userData} />
    </div>
  );
}

// 方法 3：fetch 使用 no-store
async function fetchUserData(userId) {
  const res = await fetch(`https://api.example.com/users/${userId}`, {
    cache: 'no-store', // 触发动态渲染
  });
  return res.json();
}

⚖️ 优缺点

✅ 优点

•内容最新：每次请求都渲染，内容始终最新
•可个性化：可以根据用户定制内容
•SEO 友好：服务端渲染，搜索引擎可索引
•访问请求数据：可以使用 headers、cookies 等
•实时数据：适合展示实时更新的数据

❌ 缺点

•性能较差：每次请求都渲染，TTFB 较慢
•服务器负载：需要服务器资源处理每个请求
•成本高：需要持续运行的服务器
•不可缓存：无法通过 CDN 缓存（每次都不同）
•扩展性差：流量大时需要更多服务器