服务端渲染（SSR）与客户端渲染（CSR）详解

1. 背景与概念

在早期 Web 时代，网页主要是静态 HTML 页面，用户点击链接后会刷新整个页面。随着网络与前端技术的发展，人们开始追求更好的页面性能与用户体验，尤其是在移动端和实时交互场景下，对于页面加载速度的要求不断提升。

渲染是指如何将数据转换成可视化的页面输出给用户。渲染策略的不同主要体现在在哪个环节完成页面 DOM 结构的组装：

• 服务端渲染（SSR，Server-Side Rendering）：在服务器将 HTML 拼装好，再返回给浏览器。
• 客户端渲染（CSR，Client-Side Rendering）：将 HTML 基础骨架和脚本文件返回给浏览器，由客户端自行完成页面结构与内容的生成。

理解两种不同的渲染模式以及它们各自的优缺点，是进行高效 Web 开发的基础。

---

2. 服务端渲染（SSR）

2.1 原理与工作流程

SSR 的核心思想是：服务器在接收到用户请求后，通过后台模板引擎或服务器端框架将 HTML 模板与数据整合生成完整的 HTML 文件，然后将这份完整的页面内容一次性返回给用户。

下图展示 SSR 的渲染流程：

1. 用户请求页面：用户在浏览器输入 URL 或点击链接。
2. 服务器处理请求：服务器通过后端应用（如 Node.js、Java、PHP 等）执行逻辑、查询数据库或调用其他服务。
3. 生成 HTML：服务器端使用模板引擎（如 EJS、Pug、Thymeleaf 等）或 SSR 框架将数据与模板合并生成完整 HTML。
4. 返回响应：服务器一次性返回完整的 HTML 文件给浏览器。
5. 浏览器渲染：由于 HTML 已包含了页面内容，浏览器能够立即开始渲染首屏。

2.2 优点

1. 更快的首屏渲染
   • 浏览器无需等待大量的 JavaScript 执行或数据请求，在接收完服务器返回的 HTML 之后即可开始显示页面。
2. SEO 友好
   • 搜索引擎爬虫可以直接爬取到带内容的 HTML，能更好地索引页面，对需要搜索流量的网站至关重要。
3. 较好的兼容性
   • 一些不支持 JavaScript 的浏览器或者用户关闭 JS 时，仍能看到基本页面内容。

2.3 缺点

1. 服务器压力较大
   • 每次请求都要在服务器上进行页面拼装，如果遇到高并发场景，服务器负载可能会显著提高。
2. 开发部署复杂
   • SSR 通常需要前后端协同开发，或者使用如 Next.js、Nuxt.js 这类兼具前后端逻辑的框架，构建流程、部署模式均比纯前端复杂。
3. 交互性相对有限
   • SSR 返回静态 HTML 后，后续页面的动态交互需要在客户端使用 JavaScript“接管”，这通常称为 Hyd