← 返回首页

Next.js 渲染模式测试

📚 什么是渲染模式？

Next.js 提供了多种渲染策略，每种都有不同的性能特征和使用场景。选择合适的渲染模式可以显著提升应用性能和用户体验。

核心概念：

何时渲染：构建时 vs 请求时
在哪渲染：服务器 vs 客户端
多久更新：静态 vs 动态 vs 增量

📅 当前页面渲染时间：2025-12-17T09:54:09.722Z

这个页面使用静态渲染（SSG），在构建时预渲染，所以每次访问看到的时间都是构建时的时间。

📄 静态渲染 (SSG)

在构建时预渲染，生成静态 HTML

• 构建时生成 HTML
• 所有请求共享同一份 HTML
• 最快的渲染模式
• 适用于内容不常变化的页面

🔄 动态渲染 (SSR)

每次请求都在服务器渲染

• 每次请求都渲染
• 内容始终是最新的
• 可以使用请求特定数据
• 适用于实时数据、用户相关内容

🔁 增量静态再生成 (ISR)

静态生成 + 定时更新

• 构建时生成静态页面
• 定时重新验证和更新
• 兼顾性能和数据新鲜度
• 适用于定期更新的内容

⚡ 流式渲染 (Streaming)

逐步发送渲染结果，提升 TTFB

• 边渲染边发送
• 使用 Suspense 分块加载
• 改善首字节时间 (TTFB)
• 适用于复杂页面、慢数据源

🎯 按需重新验证 (On-Demand)

手动触发页面重新生成

• 通过 API 手动触发
• 使用 revalidatePath/revalidateTag
• 内容更新时立即生效
• 适用于 CMS、表单提交后

🧪 部分预渲染 (PPR)

静态 + 动态混合渲染实验性

• 静态部分在构建时生成
• 动态部分运行时渲染
• 最佳性能和数据新鲜度平衡
• Next.js 15+ 实验性特性

💻 客户端渲染 (CSR)

在浏览器中渲染

• 使用 'use client' 标记
• 在浏览器执行
• 可以使用浏览器 API
• 适用于交互式组件

🔀 混合渲染

组合多种渲染策略

• 服务端组件 + 客户端组件
• 静态部分 + 动态部分
• 灵活组合，最优性能
• Next.js App Router 的强大之处

⚡ Layout/Page 并行渲染

验证并行数据获取

• Layout 和 Page 同时获取数据
• 不会相互阻塞
• 总时间 = max(layout, page)
• React 18 并发特性

🎯 Cache Components (PPR)

Partial Prerendering

• 静态 + 缓存 + 动态混合
• 使用 'use cache' 指令
• 需要启用 cacheComponents
• Next.js 16 新特性

📊 渲染模式对比

模式	渲染时机	更新频率	性能	使用场景
SSG	构建时	不更新	⭐⭐⭐⭐⭐	营销页、文档
SSR	请求时	每次请求	⭐⭐⭐	用户数据、实时内容
ISR	构建时 + 定时	N 秒后	⭐⭐⭐⭐	博客、电商产品
Streaming	请求时（流式）	每次请求	⭐⭐⭐⭐	复杂页面、仪表盘
PPR	构建 + 请求时	混合	⭐⭐⭐⭐⭐	混合内容页面
CSR	客户端	实时	⭐⭐	交互组件、客户端状态

💡 重要提示

1. 查看构建输出：
pnpm build
构建输出会显示每个页面的渲染类型：
• ○ (Static) - 静态生成
• ƒ (Dynamic) - 动态渲染
• ℇ (Streaming) - 流式渲染
2. 生产环境测试：
pnpm build && pnpm start
某些渲染行为只在生产环境中生效，开发环境可能有差异
3. 查看页面源代码：
右键 → 查看页面源代码，可以看到服务端渲染的 HTML
4. 观察终端日志：
每个页面都会输出渲染日志，帮助理解渲染时机