概述：服务端渲染（Server-Side Rendering，SSR）是一种将网页内容在服务器端生成完整 HTML 页面后返回给客户端的技术。它与客户端渲染（Client-Side Rendering，CSR）形成对比（如 React、Vue 等 SPA 框架默认渲染方式）。
一、服务端渲染的核心流程
- 请求阶段：浏览器向服务器发送请求。
- 服务器处理：服务器执行代码（如 React/Vue 组件逻辑），生成完整的 HTML 内容（包含初始数据）。
- 返回 HTML：服务器将渲染好的 HTML 直接返回给浏览器。
- 客户端激活：浏览器下载 HTML 后直接展示内容，随后加载 JavaScript 进行「注水」（Hydration），接管后续交互。
二、为什么使用服务端渲染？
1. SEO 友好
- 问题：客户端渲染的 SPA 初始 HTML 是空壳，依赖 JavaScript 加载内容，但搜索引擎爬虫可能无法正确解析动态内容。
- 解决：SSR 直接返回包含完整内容的 HTML，确保搜索引擎能抓取关键信息（如电商产品页、新闻网站）。
2. 首屏加载更快
- 问题：CSR 需要先下载 JavaScript 再渲染内容，导致白屏时间长（尤其是弱网环境）。
- 解决：SSR 直接返回渲染好的 HTML，用户立即看到内容，提升体验（如移动端落地页）。
3. 兼容低端设备
- 问题：老旧设备或浏览器执行复杂 JavaScript 时性能差。
- 解决：SSR 减少客户端计算压力，内容直接可见。
4. 社交分享优化
- 问题：CSR 的页面在社交平台分享时，爬虫可能无法获取动态生成的元数据（如 Open Graph 标签）。
- 解决：SSR 直接生成包含元数据的 HTML，确保分享卡片正常显示。
三、适用场景
- 内容密集型网站
- 例如新闻、博客、电商产品页，依赖 SEO 获取流量。
- 首屏速度敏感的页面
- 如营销活动页、移动端首页，需快速展示核心内容。
- 需兼容老旧设备的应用
- 政府、教育等领域的传统系统用户可能使用低性能设备。
- 依赖社交传播的场景
- 用户生成内容（UGC）平台、媒体文章页需要精准的社交分享预览。
四、不推荐使用 SSR 的情况
- 高度交互的应用
- 如后台管理系统、实时仪表盘，交互复杂且无需 SEO。
- 服务器资源有限
- SSR 会增加服务器负载（需权衡成本与收益）。
- 纯静态内容
- 使用静态站点生成（SSG）更高效（如文档网站）。
五、技术选型建议
- 框架支持：Next.js（React）、Nuxt.js（Vue）、SvelteKit 等简化 SSR 实现。
- 混合渲染：对关键页面使用 SSR（如首页），非关键页面用 CSR 或 SSG。
总结
服务端渲染通过权衡服务器与客户端的计算职责，优化了 SEO、首屏速度和低端设备兼容性，但增加了开发复杂度和服务器成本。选择 SSR 前需明确业务需求，优先用于内容为核心且依赖搜索流量的场景。