渲染模式切换：SSR、SSG、CSR、ISR

现代前端框架的渲染模式早已不局限于“浏览器端搞定一切”。Nuxt 3 提供了四种主流的渲染策略，而且你可以在同一个项目里根据页面级别灵活选择，不必为整个应用指定单一模式。这一节用最直白的方式讲清它们是什么、何时用、怎么配。

四种渲染模式快速理解

| 模式 | 全称 | 一句话解释 | 典型场景 |
|------|------|-----------|----------|
| SSR | Server-Side Rendering（服务端渲染） | 每次用户请求时，服务器实时生成完整 HTML 返回给浏览器。 | 内容经常变化、需要 SEO 的页面，如新闻详情、用户动态。 |
| SSG | Static Site Generation（静态站点生成） | 构建时一次性生成所有 HTML 文件，部署后直接返回静态文件。 | 内容不经常变的页面，如文档、博客、营销落地页。 |
| CSR | Client-Side Rendering（客户端渲染） | 服务器只返回一个空壳 HTML，浏览器下载 JS 后在本地渲染页面。 | 需要登录才能访问的后台界面、强交互 SPA 页面，对 SEO 无要求。 |
| ISR | Incremental Static Regeneration（增量静态再生成） | 类似 SSG，但可以在运行时按需重新生成某个页面的静态文件（通常配合 CDN 缓存）。 | 内容更新不频繁但偶尔变动的页面，如电商商品详情页（库存、价格）。 |

补充说明：ISR 不是 Nuxt 原生内置的一种“模式开关”，而是通过 Nuxt 的 混合渲染（hybrid rendering） 能力和部署平台（如 Vercel、Netlify）配合实现的策略。Nuxt 3 允许你为单个路由声明“预渲染”并配合服务端缓存来实现 ISR 效果，因此这里一并介绍。

在 Nuxt 3 中如何切换

Nuxt 3 的渲染模式不是全局非此即彼，而是通过路由规则和配置项混合控制。核心在 nuxt.config.ts 中的 routeRules 里实现。

1. 默认模式：SSR（服务端渲染）
Nuxt 3 项目默认就是 SSR 模式。每次请求，服务端运行 Vue 组件生成 HTML，客户端再进行水合（hydration） 接管后续交互。你什么都不用配置，就已经是 SSR。

适用场景：需要动态数据且 SEO 重要的页面。

// nuxt.config.ts 默认就是 SSR，无需额外配置

2. 切换到 CSR（客户端渲染）
在 routeRules 中将某个路由设置为 ssr: false，该页面就变成完全的客户端渲染。服务器只返回一个基本 HTML 壳，Vue 在浏览器端接管一切。

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/admin/**': { ssr: false }  // 管理后台所有页面纯客户端渲染
  }
})

何时用：整个后台系统、需要登录才能访问的私有内容，这些页面不需要被搜索引擎收录，用 CSR 可以减轻服务器压力，提升内部使用时的交互体验。

3. 切换到 SSG（静态生成）
将所有页面在构建时预渲染成静态文件。最简单的方式是配置 nitro.prerender 和 ssr: true（或直接使用 Nuxt 的 generate 命令）。推荐的配置是为静态开起的页面添加 prerender 规则。

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/blog/**': { prerender: true }  // 博客所有文章在构建时生成静态 HTML
  }
})

执行 nuxt generate 后，/blog/post-1、/blog/post-2 等会变成独立的 .html 文件，部署时相当于纯静态网站服务器。
何时用：文档站、产品黄页、内容不常变的公开页面。

4. 混合模式与 ISR 的效果
你可以混合使用以上策略。比如一个电商站点：

首页 / 需要 SEO 但每小时可能更新，构建时静态生成（SSG），再配合 CDN 缓存短时间后重新验证。
商品详情 /product/123 可能需要 ISR：先用静态页面交付，如果内容过期（比如库存变化），服务端在后台重新生成该页面的静态文件，下次请求返回新文件。

实现 ISR 需要在 routeRules 中结合 prerender 和 cache 控制，同时要求部署平台支持 SWR（如 Vercel 的 ISR 支持）。

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // 商品页：构建时预渲染，设置缓存策略，模拟 ISR
    '/product/**': { 
      prerender: true,
      headers: { 'cache-control': 's-maxage=60, stale-while-revalidate=300' }
    },
    // 用户中心页：动态 SSR，需要登录状态
    '/user/**': { ssr: true },
    // 运营后台：完全 CSR
    '/admin/**': { ssr: false }
  }
})

真实世界的最佳实践

不要为了“技术酷”盲目上 SSR。SSR 增加了服务器负担和部署复杂度，如果你的应用纯靠前端 API 渲染且不需要 SEO，CSR 足矣。
善用混合模式：一个项目里，面向用户的营销页用 SSG 或 ISR，用户登录后的控制台用 CSR，动态内容页用 SSR，这是 Nuxt 3 的强项。
注意数据获取：不同模式下，数据获取钩子（useFetch、useAsyncData）的行为不同。SSR/SSG 下数据在服务端获取，CSR 下数据在客户端获取。编写通用组件时要确保数据请求兼容两种环境。
调试体验：开发时 Nuxt 默认是 SSR 模式，你可以直观看到首屏 HTML 结构。构建产物时，可通过 nuxt generate 检查 SSG 是否正常，通过部署到测试环境验证 SSR/CSR 切分。

总结：渲染模式不是单选题。Nuxt 3 允许你为一个应用里的不同页面挑选最合适的渲染策略，做到性能、SEO 和维护成本的平衡。你只需在配置文件里声明规则，剩下的交给 Nuxt 的 Nitro 引擎和部署平台。