服务器端渲染（Server-Side Rendering，简称 SSR）

服务端渲染（Server-Side Rendering，简称 SSR）是一种 Web 应用的渲染方式，其中 HTML 是在服务器上生成的，并作为完整页面发送到客户端（通常是浏览器）。客户端然后解析和显示这个 HTML。这种方法与客户端渲染（Client-Side Rendering，简称 CSR）形成对比，在客户端渲染中，浏览器下载一个最小的 HTML 页面，随后使用 JavaScript 动态生成页面内容。

服务端渲染的主要优势和特点包括#

1. 更快的首次加载:

   对于用户来说，SSR 可以更快地显示页面的首次可见内容，因为浏览器接收到的是已经渲染的页面。用户不需要等待所有的 JavaScript 加载、执行以及渲染完成。

2. 搜索引擎优化（SEO）:

   SSR 对 SEO 更加友好，因为搜索引擎爬虫可以直接抓取和索引服务器渲染的 HTML 内容。而在 CSR 中，爬虫可能需要等待 JavaScript 执行完成，有些搜索引擎的爬虫可能不会执行 JavaScript，这会影响内容的可索引性。

3. 共享重复功能:

   使用 SSR，服务器可以为多个请求重用页面生成的结果，比如通过缓存，提高效率。

4. 更好的性能:

   对于计算能力较低的设备，SSR 可以提供更好的性能体验，因为服务器通常比客户端设备拥有更强的处理能力。

5. 简化前端复杂性:

   SSR 应用可能不需要像完全的客户端应用那样复杂的 JavaScript 框架或库。

6. 更好的用户体验:

   用户看到的是完整的页面，因此在页面变得可交互之前，他们可以先阅读内容，而不是看到一个空白屏幕或加载指示符。

然而，服务端渲染也有一些潜在的缺点：

1. 服务器负载:

   SSR 可能会增加服务器的负载，因为服务器必须为每个请求生成页面内容。

2. 时间到首字节（TTFB）:

   虽然用户可以更快地看到内容，但是生成页面内容的服务器处理时间可能会导致更长的时间到首字节。

3. 客户端 JavaScript 还是需要:

   即使页面在服务器上预先渲染，通常客户端 JavaScript 仍然需要以便为页面添加交互功能。

4. 复杂的缓存策略:

   如果页面内容经常变化，实现有效的服务器缓存策略可能会变得复杂。

5. 延迟的交互:

   用户可能能够看到页面内容，但要等到 JavaScript 下载和执行完成后，页面才变得可交互。

SSR 在许多现代 Web 开发框架和库中都得到了支持，如 Next.js（基于 React）、Nuxt.js（基于 Vue.js）和 Angular Universal。这些工具都提供了简化服务端渲染工作流程的功能。

---

本文由 note.batype.com 导入。