25.1 SSR / SSG / ISR 核心原理与适用场景对比

现代前端框架（包括 Vue）默认的渲染方式是 客户端渲染（CSR）：浏览器下载一个几乎空的 HTML 文件，再加载 JavaScript 包，由 JS 在浏览器中动态生成页面内容。这种方式的好处是开发体验流畅，交互能力强；缺点是首屏白屏时间长，且搜索引擎爬虫难以抓取内容。为了解决这些问题，Vue 生态引入了服务端渲染（SSR）、静态站点生成（SSG）和增量静态再生成（ISR）。这三者在 Nuxt 3 中都有直接支持，下面分别解释它们的工作原理和适用场景。

SSR（服务端渲染）

原理
当用户请求一个页面时，服务端运行 Vue 组件，生成包含完整 HTML 内容的字符串，返回给浏览器。浏览器收到后直接展示内容（首屏立即可见），随后加载必要的 JavaScript 并对页面进行 “注水”（hydration） —— 把服务端生成的静态 DOM 与 Vue 的响应式系统、事件绑定连接起来。之后页面的交互和导航就恢复为 CSR 模式，成为单页应用。

生命周期要点

服务端执行一次组件的 setup / data / computed 等逻辑，生成 HTML。
客户端接收到 HTML 后，再次执行一遍组件的逻辑，Vue 将虚拟 DOM 与已有 DOM 进行对齐（这个过程称为 “hydrate”），而不是重新创建所有节点。
任何仅在浏览器端可用的 API（如 window、document）在服务端执行时需要做好环境判断或使用 Nuxt 提供的生命周期区分（onMounted 仅在客户端执行）。

适用场景

需要 SEO 的内容型页面（文章详情、产品介绍页）。
首屏加载性能要求高（如对速度敏感的电商首页）。
个性化内容不多，但内容变化较频繁（每次请求都需要服务端生成新的 HTML）。

SSG（静态站点生成）

原理
在构建阶段（npm run generate 或 nuxt generate），Nuxt 会遍历所有可预生成的路由，对每个路由执行 Vue 组件，生成完整的 HTML 文件并保存到磁盘。部署时，这些页面就是纯静态文件，可以直接放在 CDN 或任何静态服务器上。用户请求时直接返回对应的 HTML，无需服务端运行时。

生命周期要点

数据获取发生在构建时，因此只适用于内容在构建时已知且不会频繁变化的页面。
客户端仍需执行 hydration，将静态页面激活为 SPA。
对于内容更新频繁的站点，需要重新触发构建和部署流程。

适用场景

纯展示类网站：博客、帮助文档、作品集。
数据来自 CMS 但不实时变动的页面（如营销落地页、公司官网）。
要求极高的加载速度，而内容更新频率为“天”或“周”级别。

ISR（增量静态再生成）

原理
ISR 是 SSR 和 SSG 的折衷方案。它基于 SSG 的预渲染逻辑，但允许在运行时按需重新生成部分页面，无需重新构建整个站点。在 Nuxt 3 中，ISR 可以通过 边缘渲染 或 混合渲染 实现，例如利用 Nuxt 的配置指定某些路由在请求到达时，先检查缓存中的静态 HTML，如果缓存过期（按时间或事件失效），则在服务端重新生成该页面，并将新 HTML 缓存起来供后续请求使用。

核心机制

服务端为每条路由保持一个版本号或缓存时间。
当请求到来且静态文件失效时，服务端执行一次 SSR 生成新页面并写入缓存。
之后的请求直接命中缓存，无需再次生成。

适用场景

内容数量巨大（如百万级商品详情页），但大部分内容很少变动；同时新内容需要快速上线。
需要在保留 SSG 高速优势的前提下，支持近乎实时的内容更新（如电商秒杀状态）。
需要避免全站重新构建的耗时操作。

三种渲染模式对比表

| | SSR（服务端渲染） | SSG（静态生成） | ISR（增量再生成） |
|---|---|---|---|
| HTML 生成时机 | 请求时动态生成 | 构建时预生成 | 请求时按需生成，之后缓存 |
| 首次访问速度 | 较快（依赖服务器） | 最快（CDN 直出） | 极快（命中缓存时等同 SSG） |
| 内容新鲜度 | 实时 | 上次构建时的状态 | 可配置的时效（如 60s 更新） |
| 服务器成本 | 需要常驻 Node 服务 | 仅需静态文件托管 | 需要支持挂载的服务器或边缘平台（如 Vercel/Netlify） |
| SEO 兼容性 | 好 | 好 | 好 |
| 开发复杂度 | 需处理服务端/客户端环境差异 | 类似 SPA，但需关注构建数据源 | 较复杂，需配置失效策略 |
| 典型项目 | 后台管理系统、社交 feed | 个人博客、文档站 | 电商商品页、新闻站点 |

在 Nuxt 3 中的实践
Nuxt 3 内置了混合渲染能力，你无需切换框架就能在一个项目中同时使用这三种模式：

通过 useFetch 或 useAsyncData 获取数据，自动适配 SSR/SSG。
在 nuxt.config.ts 中设置 routeRules，可以为不同路由指定渲染策略：

  export default defineNuxtConfig({
    routeRules: {
      '/blog/**': { static: true },          // SSG
      '/products/**': { swr: 60 },          // ISR，每60秒校验新鲜度
      '/dashboard/**': { ssr: false },      // 纯 CSR
      '/api/**': { cors: true }             // API 代理
    }
  })

一条路由用 SSG 生成博客文章，另一条用 ISR 缓存商品页，剩下的管理后台直接用 CSR——这种“混搭”是 Nuxt 3 最强大的能力，也是 Vue 渐进式理念从客户端延伸到服务端的体现。