SSR 项目的性能成本和部署复杂度体现在哪里？
简化版
SSR 能改善首屏 HTML 和 SEO，但会引入服务端渲染成本、运行时部署、缓存失效、数据源压力、监控排障和客户端 hydration 成本。评估 SSR 不能只看首屏快，还要看 QPS、TTFB、服务器 CPU、缓存命中率和交互可用时间。
详细版
CSR 多数压力在浏览器和静态 CDN，SSR 则每个动态请求可能消耗服务端 CPU 和数据请求。若页面 QPS 为 1000，每次渲染 20ms CPU，理论上每秒就需要约 20 秒 CPU 时间，必须依赖多核、缓存或降级策略。
SSR 请求成本 = 数据获取 + 组件渲染 + HTML 序列化 + 网络传输 + hydration部署上，SSR 需要 Node/Edge 运行时、日志监控、错误处理、容量规划和缓存策略。面试回答要体现取舍：适合 SEO 和首屏敏感页面，不适合所有页面无脑 SSR。
完整版教学
一、SSR 把一部分成本搬到了服务端
CSR 的 HTML 通常是静态文件，CDN 可以直接分发。SSR 每次请求可能都要运行渲染逻辑、取数据、拼 HTML，这就产生服务端成本。
| 模式 | 主要成本位置 | 典型压力 |
|---|---|---|
| CSR | 浏览器 | 首屏空白、客户端 JS |
| SSG | 构建时和 CDN | 构建耗时、内容更新 |
| SSR | 请求时服务端 | CPU、数据源、TTFB |
记忆钩子：SSR 不是免费加速，它是用服务端工作换首屏 HTML。
二、CPU 成本的数字感
假设一个页面服务端渲染平均消耗 15ms CPU，峰值 QPS 为 800：
每秒 CPU 时间 = 15ms * 800 = 12000ms = 12 核满载这还没算数据请求、JSON 序列化、日志、框架开销和 GC。若没有缓存和水平扩容，高峰期 TTFB 会快速升高。面试中给出这种简单估算，能说明你真正理解 SSR 运行成本。
三、数据源压力
SSR 页面往往在服务端集中请求数据。客户端分散请求时，浏览器和 CDN 还能分担一部分；SSR 高峰则可能让 Node 服务和后端 API 同时承压。
1000 QPS 页面
每页 4 个后端接口
后端 API 约 4000 QPS优化方向包括服务端请求合并、缓存、批量接口、超时降级、只渲染首屏必要数据。SSR 中后端接口慢，用户看到的就是 HTML 首字节慢。
四、缓存是 SSR 成败关键
SSR 不代表每个请求都实时渲染。可缓存页面应利用 HTTP 缓存、CDN 缓存、片段缓存或框架 revalidate 机制。
| 页面 | 缓存策略 |
|---|---|
| 商品详情 | 短 TTL + 主动失效 |
| 新闻文章 | SSG/ISR 更合适 |
| 用户中心 | 私有缓存或不缓存 |
| 搜索结果 | 按 query 短缓存 |
缓存难点在个性化和权限。只要 HTML 中包含用户私有信息，就不能被公共 CDN 误缓存给其他用户。
五、部署和运维复杂度
SSR 项目需要运行时服务，不再只是上传静态文件。你要处理进程管理、冷启动、内存泄漏、日志、链路追踪、健康检查、灰度发布和回滚。
静态站: build -> upload CDN
SSR: build -> deploy runtime -> monitor -> autoscale -> cache -> rollback如果使用 Edge SSR，还要考虑运行时限制；如果使用 Node SSR，还要考虑容器资源和多地域延迟。部署复杂度是 SSR 选型必须算进去的成本。
六、客户端 hydration 仍然要付费
SSR 返回 HTML 后，页面并不一定马上可交互。客户端还要下载 JS、执行 JS、hydration 绑定事件。
FCP 变快 ≠ TTI 一定变快
HTML 可见 -> JS 下载 -> JS 执行 -> hydrate -> 可交互如果客户端包很大，用户会看到页面已经显示但按钮暂时不可用。优化 SSR 也要配合代码分割、减少客户端组件、延迟非关键交互和监控 INP。
七、常见误区与追问
- 误区：SSR 一定比 CSR 快。 SSR 可能改善 FCP/SEO，但 TTFB 和 hydration 成本可能更高。
- 误区：SSR 页面不需要缓存。 没有缓存，高 QPS 页面会压垮渲染层和后端。
- 误区：服务端渲染完页面就可交互。 交互还依赖客户端 JS 下载和 hydration。
- 追问：如何估算 SSR 机器成本？ 用单次渲染 CPU 时间乘以峰值 QPS，再考虑数据和冗余。
- 追问：哪些页面不适合 SSR？ 强个性化、低 SEO 价值、重计算、后台管理类页面未必适合。
- 追问：SSR 如何防缓存串用户？ 私有数据不进公共缓存，按用户或权限区分缓存键，谨慎设置 Cache-Control。
八、加强记忆
SSR 成本题可以按“算力、数据、缓存、部署、水合”五个词回答：服务端要花 CPU 渲染，后端数据源会承压，缓存决定能否扛量，部署从静态文件变成运行时服务，客户端仍要 hydration 才能交互。SSR 是取舍，不是所有页面的默认答案。