Next.js 中客户端渲染 (CSR)、服务端渲染 (SSR) 和静态站点生成 (SSG) 的区别是什么？ -...

知识点图片

在 Next.js 中，CSR (客户端渲染)、SSR (服务端渲染) 和 SSG (静态站点生成) 是三种核心的页面渲染策略。Next.js 的强大之处在于它允许你在同一个应用中为不同的页面混合使用这些策略。

以下是这三者的详细对比和区别：

1. SSG - Static Site Generation (静态站点生成)

核心概念：
页面在 构建阶段 (Build Time) 就已经被生成为 HTML 文件。当用户访问页面时，服务器直接返回这个已经准备好的 HTML，不需要实时计算。

生成时机： next build 时（项目打包时）。
数据获取：
- Pages Router: 使用 getStaticProps。
- App Router: 默认行为（fetch 请求默认缓存）。
优点：
- 性能最快： HTML 可以被 CDN 缓存，用户请求时直接由边缘节点返回。
- SEO 极佳： 爬虫可以直接看到完整的 HTML 内容。
- 服务器压力小： 不需要为每个请求运行服务器端逻辑。
缺点：
- 数据实时性差： 如果数据更新，需要重新构建整个项目（除非使用 ISR，见下文）。
- 构建时间： 如果页面非常多（如几万个商品页），构建时间会很长。
适用场景： 博客文章、文档、营销页面、电商产品详情页（数据不频繁变动）。

补充：ISR (Incremental Static Regeneration)
Next.js 在 SSG 的基础上提供了 ISR。它允许你在构建后，根据设定的时间间隔（revalidate time），在后台更新静态页面。这解决了 SSG 数据过时的问题，同时保留了静态页面的速度优势。

2. SSR - Server-Side Rendering (服务端渲染)

核心概念：
页面在 每次用户请求 (Request Time) 时，都在服务器端实时生成 HTML。服务器获取最新数据，渲染成 HTML，然后发送给浏览器。

生成时机： 用户访问页面的那一刻。
数据获取：
- Pages Router: 使用 getServerSideProps。
- App Router: 使用 fetch(url, { cache: 'no-store' }) 或使用动态函数（如 cookies(), headers()）。
优点：
- 数据总是最新的： 保证用户看到的是实时数据。
- SEO 友好： 爬虫能获取到包含最新数据的完整 HTML。
- 安全性： 敏感逻辑（如 API 密钥、数据库连接）在服务端运行，不暴露给客户端。
缺点：
- TTFB (首字节时间) 较慢： 用户必须等待服务器获取数据并渲染完成才能看到页面。
- 服务器压力大： 每个请求都需要服务器计算资源。
- 无法被 CDN 缓存 HTML： (通常情况下)。
适用场景： 社交媒体动态流、个性化仪表盘、需要实时库存的页面、依赖请求头（Cookies/User-Agent）的页面。

3. CSR - Client-Side Rendering (客户端渲染)

核心概念：
服务器只返回一个空的 HTML 骨架（或加载动画）和 JavaScript bundle。浏览器加载 JS 后，在客户端执行代码，通过 API 获取数据，并动态填充页面内容。

生成时机： 浏览器加载并执行 JS 后。
数据获取：
- Pages Router: 在组件内部使用 useEffect 或数据请求库（如 SWR, TanStack Query）。
- App Router: 在声明了 'use client' 的组件中使用 useEffect 等。
优点：
- 交互体验好： 页面加载后，后续的交互（如筛选、分页）不需要刷新页面，感觉像原生 App。
- 服务器压力较小： 渲染逻辑在用户设备上运行。
缺点：
- SEO 较差： 虽然 Google 爬虫能力提升了，但对于其他爬虫或社交媒体分享预览（Open Graph），CSR 往往无法获取内容。
- FCP (首次内容绘制) 慢： 用户可能会先看到白屏或加载转圈，直到 JS 下载并执行完毕。
适用场景： 用户后台管理系统、即时通讯应用、不需要 SEO 的私有页面、页面中极其复杂的交互组件。

总结对比表

特性	SSG (静态生成)	SSR (服务端渲染)	CSR (客户端渲染)
渲染位置	构建服务器	部署服务器	用户浏览器
渲染时机	Build Time (构建时)	Request Time (请求时)	Runtime (运行时)
性能 (速度)	⭐⭐⭐⭐⭐ (最快，CDN)	⭐⭐⭐ (取决于服务器处理速度)	⭐⭐ (取决于用户设备和网速)
SEO	⭐⭐⭐⭐⭐ (极佳)	⭐⭐⭐⭐⭐ (极佳)	⭐⭐ (较差/不稳定)
数据实时性	低 (需重新构建或 ISR)	高 (实时)	高 (实时)
服务器成本	低	高	低
Next.js API (Pages)	`getStaticProps`	`getServerSideProps`	`useEffect` / SWR

应该如何选择？

Next.js 官方推荐的思维模式是：

默认优先考虑 SSG：如果页面内容不需要针对每个用户实时变化（如博客、帮助中心），用 SSG，因为它最快且最便宜。
如果需要实时数据：
- 如果是公开内容且需要 SEO（如即时新闻），用 SSR。
- 如果是私有内容（如个人购物车、后台设置），推荐 SSG (骨架) + CSR (数据)。即先加载页面外壳，然后由客户端 JS 填充数据。

在 Next.js App Router (v13+) 中，默认组件都是 React Server Components (RSC)，这本质上是一种更先进的混合模式，它默认在服务端渲染（类似 SSG/SSR），只有添加了 'use client' 的部分才会在客户端渲染（CSR）。

播面