渲染模式
Nuxt 是“一个框架多种形态”：SSR、SSG、ISR、SWR、纯 CSR。通过 routeRules 按路由选择，Nitro 会把你的决定翻译成每个平台的原生能力。
四种模式
SSR（服务端渲染）—— 默认
每次请求都在服务端渲染。适合：
- 个性化页面（鉴权、账户、购物车）。
- 随用户或请求变化的内容。
- 对实时 SEO 有要求的页面。
不用额外配置，你一开始就在这个模式里。
SSG（静态站点生成）—— prerender
构建期渲染，直接发纯 HTML。适合：
- 营销页、落地页。
- 已知 slug 的文档、博客。
pnpm build && pnpm preview
# 或者纯静态托管：
pnpm generate
按路由声明：
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/about': { prerender: true },
},
})
nuxt generate 相当于对所有路由开启 prerender，并额外生成 /200.html、/404.html 作为 SPA fallback。
ISR（增量静态再生）—— isr
先发缓存 HTML，过期后在后台重新生成。适合：
- 流量大但内容偶尔更新的页面。
export default defineNuxtConfig({
routeRules: {
'/blog/**': { isr: 60 }, // 缓存 60 秒
'/docs/**': { isr: true }, // 缓存到下次发版
},
})
平台支持：Vercel、Netlify、Cloudflare（视预设而定）。
SWR（stale-while-revalidate）—— swr
思路跟 ISR 类似，但靠 HTTP 缓存头 / CDN 实现：
routeRules: {
'/feed': { swr: 30 }, // 30 秒内允许发旧内容
}
纯 CSR —— ssr: false
完全跳过 SSR。适合：
- 登录后访问的仪表板。
- 首屏就依赖
window/document的页面。
routeRules: {
'/admin/**': { ssr: false },
}
想全站 CSR，全局关掉 SSR：
export default defineNuxtConfig({
ssr: false,
})
再 nuxt generate 会得到一个 index.html，由它在客户端启动 Vue —— 经典 SPA。
routeRules —— 决策集中在一起
一条规则可以组合多个关注点：
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/blog/**': { swr: 3600, headers: { 'cache-control': 's-maxage=3600' } },
'/api/public/*': { cache: { maxAge: 300 } },
'/admin/**': { ssr: false, appMiddleware: 'auth' },
'/legacy': { redirect: { to: '/new', statusCode: 301 } },
'/proxy/**': { proxy: 'https://api.example.com/**' },
},
})
可用 key：prerender、isr、swr、ssr、cache、headers、redirect、proxy、noScripts、appMiddleware。通配符：* 单段、** 多段。
静态托管 vs 混合托管
| 模式 | 输出 | 托管位置 |
|---|---|---|
| 全 SSR | .output/server/ + public/ |
Node、Vercel、Netlify、Cloudflare |
全 SSG（nuxt generate） |
只有 .output/public/ |
任意静态托管 + CDN |
| 混合（按路由） | 预渲染 + SSR 产物混合 | 支持 ISR / SWR 的平台 |
CSR（ssr: false + generate） |
静态 index.html + JS bundle |
任意静态托管 |
怎么选？
- 登录后看板 → SSR（没 SEO 需求可以
ssr: false）。 - 营销页 →
prerender: true。 - 博客 / 文档 / 目录 → ISR 或 SWR。
- 自家 API →
/api/*加cache.maxAge（幂等接口）。 - 重定向 / 代理 → 走
routeRules，别自己写中间件。
易踩的坑
noScripts: true不会发 Nuxt 运行时 JS —— 做纯静态落地页香，交互页面慎用。- 按路由
ssr: false也会在服务端构建外壳，客户端只 hydrate JS。 prerender动态路由需要爬虫提示或显式列表（nitro.prerender.routes）。- CDN 边缘场景下把
swr/isr配上合适的 cache-control，体验会更顺。
每条路由挑一种渲染模式，意图统一写在 routeRules，剩下的交给 Nitro。
