服务端渲染（SSR）
请求到来时由服务端先生成带内容的 HTML，再交给浏览器显示并由客户端接管交互的渲染方式。
#type / concept
#status / evergreen
#tech / dev / frontend
#resource / server-side-rendering
#platform / server
[!info] related notes
- 所属 MOC: 前端基础 MOC, 前端工程化 MOC
- 前置概念: 浏览器渲染过程
- 并列概念: 客户端渲染（CSR）, 静态站点生成（SSG）
- 易混淆概念: hydration, React 服务端组件 vs 客户端组件
- 关系笔记: CSR、SSR 与 SSG, SSR vs CSR
服务端渲染（SSR）
一句话定义
SSR（Server-Side Rendering）是在请求到来时由服务端先渲染出带内容的 HTML，再交给浏览器显示，并在客户端完成后续接管的渲染方式。
核心内容
- 用户请求某个路由后，服务端会先取数据并把组件树渲染成 HTML
- 浏览器拿到响应后可以更早看到首屏内容
- 如果页面还需要完整交互，前端框架通常还要在客户端执行 hydration
- SSR 往往能改善首屏直出和 SEO，但会引入服务端渲染链路、缓存策略和资源成本
最小例子
- 一个商品详情页在 Next.js 或 Nuxt 中收到请求后，服务端先查商品数据
- 服务端把标题、价格、描述等内容渲染进 HTML 返回给浏览器
- 浏览器先显示内容，再下载客户端脚本，把加购物车、切换规格等交互接上
边界与易混淆点
- SSR 不等于“不需要前端 JavaScript”；多数交互页仍然需要 hydration
- SSR 也不等于“天然更快”；如果服务端慢、缓存策略差或 hydration 很重，体感未必更好
- SSR 和 SSG 的关键差别在 HTML 生成时机：SSR 是请求时，SSG 是构建时
- 需要首屏直出、SEO，且内容会随请求、身份或上下文变化的页面，更常考虑 SSR