Nuxt 渲染模式选择指南
“到底要不要 SSR？”是 Nuxt 项目里最常见、也最容易吵起来的问题。
原因是：渲染模式不是一个单点选择，它同时牵动：
- SEO（可索引内容是否直出）
- 性能（TTFB/LCP/INP）
- 成本（回源、算力、带宽）
- 一致性（内容更新策略、缓存失效）
- 工程复杂度（部署、观测、回滚）
这篇文章给你一套可执行的选型方法：先定义目标，再选模式，最后给落地结构与检查清单。
1. 四个维度，决定你的模式
在做任何选择前，先回答四个问题：
- 页面是否需要 SEO？（搜索引擎是否必须看到正文）
- 数据是否强一致？（用户态/支付/权限）
- 更新频率如何？（发布频繁 vs 偶尔）
- 流量模型是什么？（突发、平稳、长尾）
这些问题比“SSR 快还是慢”更重要。
2. 主要模式概览：CSR / SSR / SSG / ISR / 预渲染
2.1 CSR（纯客户端渲染）
特点：
- HTML 只有壳
- SEO 风险大（除非你不索引）
- 首屏性能取决于 JS 与接口
适用：
- 用户中心、后台、强交互工具
- 不需要索引或明确
noindex
2.2 SSR（服务端渲染）
特点：
- 首屏 HTML 直出，SEO 友好
- 每次请求可能都需要回源（需要缓存）
适用：
- 内容需要 SEO，但数据强动态
- 你有完善的缓存策略
2.3 SSG（静态生成）
特点：
- 性能与稳定性最好
- 更新成本在“构建时”
适用：
- 内容站、文档站、营销页
- 更新频率不高或可接受构建延迟
2.4 ISR（增量静态再生/按需生成）
在 Nuxt 体系里，ISR 的表达可能来自：
- 生成策略 + 缓存策略
- 或配合边缘缓存与按需失效
特点：
- 静态化收益 + 可控更新
- 需要你设计“失效与再生成”
适用：
- 内容更新频繁，但仍要 SEO
- 你希望在高峰也保持稳定
2.5 预渲染（prerender）
特点：
- 对部分路由预先生成 HTML
- 适合混合站点
适用：
- 首页/核心落地页需要 SEO
- 工具页/用户页不需要 SEO
3. 选型矩阵（可直接用）
你可以按路由维度做选型，而不是全站一刀切。
| 页面类型 | SEO | 更新频率 | 推荐 |
|---|---|---|---|
| 文章详情 | 高 | 中 | SSG/ISR |
| 文章列表 | 高 | 中 | SSG/ISR（注意聚合页） |
| 产品详情 | 高 | 高 | ISR/SSR（配缓存） |
| 搜索结果 | 中 | 高 | SSR/CSR（配 noindex） |
| 用户中心 | 低 | 高 | CSR |
| 工具页 | 低/中 | 中 | CSR + 预渲染核心路由 |
4. 混合渲染：真正的生产最优解
生产上最常见的模式是混合：
- 公共内容：静态化（SSG/ISR）+ CDN
- 用户态内容：CSR 或 SSR（private/no-store）
- 关键落地页：预渲染
好处：
- SEO 与性能兼得
- 成本可控
5. 缓存与失效：模式落地的关键
无论你选 SSR 还是 ISR，本质都离不开缓存。
建议把缓存分层：
- 浏览器
- CDN
- 应用侧（server runtime）
- 数据侧（Redis/DB）
并给每条路由明确：
- 是否 public/private
- TTL 多久
- 写操作后如何失效
6. 常见误区
- “SSR 一定更快”：不一定，TTFB 可能更慢；LCP 受资源与主线程影响更大
- “SSG 一定更好”：构建成本与发布延迟可能无法接受
- “全站一个模式最省事”：短期省事，长期很难优化与扩展
7. 上线检查清单
- 按路由明确 SEO 需求（哪些可索引）
- 用户态页面是否 private/no-store
- 公共内容是否走 CDN 并有合理 TTL
- 更新路径是否有失效机制（发布事件）
- 是否有 RUM/日志来验证效果
总结
Nuxt 渲染模式选型的正确做法是：
- 以“页面类型”而不是“站点整体”做选择
- 把缓存与失效当成一等公民
- 用观测验证，而不是凭感觉
