SSR通过服务器端预先执行JS生成完整HTML，使浏览器直接渲染，显著缩短白屏时间、提升首屏速度、利于SEO；需同构代码、服务端数据预取、hydration注水，并非所有场景适用。
JavaScript服务端渲染（Server-Side Rendering，简称 SSR）是指在服务器上预先执行 JavaScript 代码，生成完整的 HTML 字符串，再将该 HTML 直接发送给浏览器。它不是等页面加载完 JS 再渲染，而是让浏览器一收到响应就能显示内容，从而显著提升首屏加载的感知速度。
SSR 如何缩短“白屏时间”
传统客户端渲染（CSR）需要先下载 HTML 骨架、再加载 JS、解析、执行、请求数据、最后渲染——这个过程可能持续几百毫秒甚至更久，期间用户看到的是空白页或 loading。SSR 则把这整套流程提前到服务器完成，浏览器拿到的是已带数据、已渲染好的 HTML，可立即呈现，白屏时间趋近于零。
- 搜索引擎爬虫能直接抓取完整内容，利于 SEO
- 弱网或低端设备用户也能快速看到可用界面
- 首屏内容无需等待 JS 执行，视觉反馈更快
核心实现逻辑：同构（Isomorphic）代码
SSR 不是写两套代码，而是用同一套 React/Vue 等框架代码，在 Node.js 环境中运行组件并生成 HTML。关键在于组件必须“可服务端执行”：不能直接调用 window、document 等浏览器专属 API；数据获取需在渲染前完成（如 React 的 getServerSideProps 或 Vue 的 serverPrefetch）。
- 路由匹配后，服务端调用对应组件的预取函数获取数据
- 将数据注入组件上下文，触发一次同步渲染，产出 HTML 字符串
- HTML 连同初始数据（通常嵌入
<script>window.__INITIAL_STATE__</script>）一起返回
配合 hydration 实现交互可响应
服务端渲染出的 HTML 是静态的，没有事件绑定和状态响应。浏览器收到后，会启动前端框架进行“注水”（hydration）：复用已有 DOM，挂载事件监听器，激活组件状态。这个过程极快，用户几乎无感，但必须确保服务端与客户端渲染结果完全一致，否则 React/Vue 会清空 DOM 并重新渲染，导致闪烁或性能损失。
立即学习“Java免费学习笔记（深入）”；
- 避免在组件顶层使用
Math.random()或new Date()等非确定性逻辑 - 检查是否意外在服务端执行了仅限浏览器的代码（如 localStorage）
- 启用框架的 hydration 警告（如 React 的
hydrateRoot+ 开发模式）便于排查
并非所有场景都适合 SSR
SSR 增加了服务器计算压力和响应延迟，对高并发、低延迟要求严苛的后台类应用可能得不偿失。它最适合内容型站点（博客、电商首页、新闻列表），尤其是首屏依赖动态数据且对 SEO 和加载体验敏感的场景。若页面数据变化频繁、个性化程度高（如用户仪表盘），可考虑结合 SSG（静态生成）或增量静态再生（ISR）优化。
- 纯内部管理后台 → 通常用 CSR 更简单高效
- 营销落地页 / 产品介绍页 → SSR 或 SSG 更合适
- 用户登录后高度定制化的内容 → 可首屏 SSR + 后续按需 CSR
