什么是 Edge SSR?它和传统 Node SSR 有什么区别?
简化版
Edge SSR 是把服务端渲染逻辑部署到更靠近用户的边缘节点执行,减少网络往返延迟。它相比传统 Node SSR 首字节可能更快,但运行时能力受限,例如 Node API、长连接、文件系统和部分依赖可能不可用。
详细版
传统 SSR 通常在中心机房 Node 服务中渲染;Edge SSR 在 CDN 边缘或边缘函数中渲染。用户在上海访问时,如果中心在新加坡,往返可能 80ms;边缘节点在本地或邻近区域,网络延迟可能降到 10ms 级别。
传统 SSR: 用户 -> 源站 Node -> 数据源 -> HTML
Edge SSR: 用户 -> 边缘节点 -> 数据源/缓存 -> HTML
面试要说明它适合轻量动态渲染、个性化但可缓存的页面、地理位置相关内容;不适合强依赖 Node 原生模块、重 CPU、长任务或必须访问内网数据库的复杂 SSR。
完整版教学
一、Edge SSR 解决的核心问题
SSR 的 TTFB 包含用户到服务器的网络时间、服务端渲染时间和数据获取时间。Edge SSR 主要优化第一段:让渲染入口更靠近用户。
TTFB = 网络往返 + 服务端计算 + 数据等待
假设用户到中心源站 RTT 是 90ms,到边缘节点 RTT 是 15ms,单次请求理论上就能节省约 75ms 网络等待。对首屏 HTML 来说,这个差异很明显。
记忆钩子:Edge SSR 把“渲染柜台”搬到用户附近,但后厨数据源如果很远,仍然会慢。
二、传统 Node SSR 的特点
传统 Node SSR 运行在完整 Node 环境中,能使用文件系统、TCP 连接、Node 原生模块、复杂中间件和内部网络。它适合企业内部 API、复杂鉴权、重依赖服务端渲染。
Browser -> Node SSR Server -> Redis/DB/Internal API -> HTML
缺点是离全球用户可能较远。如果用户遍布多地,一个中心机房会让远端用户首字节变慢。多地域部署可以缓解,但运维复杂度更高。
三、Edge Runtime 的限制
边缘运行时通常更接近 Web 标准 API,例如 fetch、Request、Response、Web Streams。它不一定支持完整 Node API。
| 能力 | Node SSR | Edge SSR |
|---|---|---|
Node fs | 支持 | 通常不支持 |
| 原生 npm 模块 | 支持较好 | 可能不支持 |
| Web Streams | 支持 | 支持 |
| 冷启动 | 取决于平台 | 通常更轻 |
| 长时间任务 | 可控 | 常受限制 |
如果 SSR 代码依赖 fs.readFileSync、数据库长连接或 Node 原生扩展,迁到 Edge 可能直接失败。写 Edge 代码要主动减少运行时耦合。
四、数据源距离决定最终收益
用户 -> 边缘节点 10ms
边缘节点 -> 中心数据库 100ms
总等待仍可能很高
Edge SSR 最怕“入口近,数据远”。如果每次边缘渲染都要回源访问中心数据库,节省的用户到服务器延迟可能被边缘到数据源的延迟抵消。
更合理的做法是结合边缘缓存、全球复制数据、KV、只读配置下沉,或把个性化部分做成客户端请求。否则 Edge 只是换了请求路径,不一定更快。
五、缓存策略更关键
Edge 的优势常和缓存绑定。HTML、数据片段、配置、A/B 实验规则都可以在边缘缓存,减少回源。
| 内容 | Edge 适合度 |
|---|---|
| 新闻详情页 | 高,可短期缓存 |
| 用户购物车 | 低,强个性化 |
| 地区化落地页 | 高,按地区缓存 |
| 后台复杂报表 | 低,数据权限复杂 |
如果页面每个用户都不同,缓存命中率很低,Edge SSR 的价值就会下降。面试时要把“动态渲染”和“缓存命中率”一起分析。
六、适用和不适用场景
适合 Edge SSR 的页面通常轻量、读多写少、靠近公开内容、可缓存或半个性化。不适合的页面通常依赖复杂后端、长任务、内网数据源、重计算或强一致写操作。
适合: 营销页、商品详情、地域化内容、轻量 A/B
不适合: 后台管理、复杂报表、重 CPU 图表生成、强事务页面
Edge SSR 不是比 Node SSR 永远更先进,而是把延迟、能力和运维成本重新做了一次权衡。
七、常见误区与追问
- 误区:Edge SSR 一定比 Node SSR 快。 如果数据源很远或缓存命中低,收益可能很小。
- 误区:Edge Runtime 等于完整 Node。 很多 Node API 和原生依赖不可用。
- 误区:所有 SSR 都应该迁到边缘。 重计算、复杂鉴权、内网依赖页面未必适合。
- 追问:Edge SSR 优化的是哪段时间? 主要优化用户到渲染入口的网络延迟。
- 追问:如何提升 Edge SSR 收益? 提高边缘缓存命中,把只读数据下沉,减少回源。
- 追问:为什么说数据源距离重要? 边缘节点若频繁访问中心数据源,会把延迟转移到回源链路。
八、加强记忆
Edge SSR 可以记成“近入口、轻运行、重缓存”:渲染入口靠近用户,运行时更轻但能力受限,最终效果高度依赖缓存和数据源距离。它不是传统 Node SSR 的无脑替代,而是适合全球访问、轻量动态和可缓存页面的渲染策略。