SSR通过服务器端执行JavaScript生成完整HTML，使浏览器无需等待JS执行即可立即渲染首屏内容，显著缩短白屏时间和FCP，提升SEO与弱网体验，但增加服务端开销且需处理hydration和API兼容性问题。
JavaScript服务端渲染（Server-Side Rendering，简称 SSR）是指在服务器端执行 JavaScript 代码，生成完整的 HTML 字符串，再将这个 HTML 直接发送给浏览器。与传统的客户端渲染（CSR）不同，SSR 不是先发一个空壳 HTML 和 JS 文件，再等浏览器下载、解析、执行 JS 后才渲染页面，而是在用户请求的那一刻，服务器就已把“画好”的页面内容准备好。
SSR 如何让首屏更快显示
首屏加载速度的关键在于“用户看到内容的时间”，而不是“资源全部加载完的时间”。SSR 直接返回带内容的 HTML，浏览器拿到后无需等待 JS 执行就能立即渲染出可视区域，大幅缩短了“白屏时间”和“首次内容绘制（FCP）”时间。
- 搜索引擎爬虫能直接抓取完整 HTML，利于 SEO，间接提升自然流量带来的首屏访问体验
- 弱网或低端设备用户不用等 JS 下载和执行，内容几乎“秒出”
- 首屏所需数据可随 HTML 一起注入（如通过 window.__INITIAL_STATE__），避免客户端额外发起接口请求
SSR 不是万能加速器
它本身有开销：每次请求都要在服务端运行 JS（比如 React/Vue 渲染逻辑），会增加服务器 CPU 压力和响应延迟。如果未合理缓存或优化，反而可能拖慢整体性能。
- 静态内容适合用 CDN 缓存 SSR 结果，动态内容需权衡是否启用 SSR 或改用静态站点生成（SSG）
- 首次交互仍需等待 JS “激活”（hydration），若 JS 包过大，会导致“可交互时间（TTI）”滞后
- 服务端环境缺失浏览器 API（如 window、document），需做兼容处理，否则渲染会失败
常见 SSR 实现方式
主流框架都提供了官方或社区成熟的 SSR 支持方案，目标一致：复用同一套组件逻辑，在服务端产出 HTML，在客户端接管交互。
立即学习“Java免费学习笔记（深入）”；
- Next.js（React）：默认开启 SSR，getServerSideProps 可在请求时获取数据并注入页面
- Nuxt.js（Vue）：通过 asyncData 或 fetch 钩子实现服务端数据预取
- Remix：强调路由级数据加载与流式 SSR，支持渐进式内容传输
对比 CSR：关键差异在哪
以一个新闻列表页为例：
- CSR 流程：HTML → 加载 JS → 请求 API → 解析 JSON → 渲染 DOM → 显示内容（中间可能白屏 1–2 秒）
- SSR 流程：HTML（含新闻标题、摘要等）→ 浏览器直接渲染 → 同时加载 JS → 激活交互（用户看到内容快，通常 300–800ms 内）
本质区别不是“用了 JS”，而是“谁来执行渲染”——SSR 把渲染工作提前到服务端完成，把结果当“成品”交付。
