[!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

Related notes

• SSR vs CSR
• CSR、SSR 与 SSG
• SPA vs MPA
• Hydration