深入探讨企业社会责任、社会服务责任、社会服务集团和企业社会责任

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

网络的发展催生了许多创新的网页渲染和交付方式，服务器可以通过这些方式将网页呈现给浏览器。其中包括服务器端渲染 (SSR)、客户端渲染 (CSR)、静态站点生成 (SSG)和增量静态重生成/重验证 (SSR)。虽然这些技术大多显著提升了网站加载/交付速度，但它们也各有优缺点。本文将深入探讨这些技术，揭秘其工作原理和适用场景。

您好，我是一名资深前端工程师，目前正在寻找自由职业（Upwork）和全职工作（GitHub）。如果您能提供任何推荐或机会，我将不胜感激。谢谢！

客户端渲染（CSR）

使用客户端渲染时，当向服务器发出请求时，服务器会返回一个空白的 HTML 文件和一个 JavaScript 包。如果应用是用 React 构建的，那么 JavaScript 会基于虚拟 DOM（例如 React 虚拟 DOM）从头开始构建DOM（HTML 元素）。因此，根据返回给浏览器的包大小，用户通常会在几秒钟内看到空白屏幕，然后才会显示网站信息。

客户端渲染涉及的步骤

1. 用户向服务器发出请求
2. 服务器返回一个空白的 HTML 页面
3. 浏览器获取并下载 JS 包
4. JS 构建 HTML 用户界面并使其具有交互性（附加必要的事件处理程序）。
5. 任何对第三方 API 的请求都会发出
6. 用户现在可以与网页进行完全互动。

何时使用客户端渲染

客户端渲染最适合用于具有大型复杂功能和页面的 Web 应用程序。

优点

• 减少服务器端工作负载
• 降低服务器成本
• 更佳的客户体验

缺点

• 由于发送到浏览器的初始页面为空，导致搜索引擎优化 (SEO) 效果不佳，网络爬虫无法索引页面内容。
• 由于 DOM 是在客户端构建的，因此初始加载速度较慢。

服务器端渲染（SSR）

使用服务器端渲染时，当向服务器发出页面请求时，服务器会从后端获取该页面的相关数据，构建完整的 HTML 页面，并将其发送回浏览器，浏览器即可看到该页面。

注意：即使浏览器中禁用了 JavaScript，我们仍然可以看到完整的页面，但无法与之交互。

因此，通过服务器端渲染，我们在服务器上构建完整的 HTML 页面并将其返回给浏览器。

何时使用服务器端渲染

SSR 可用于SEO至关重要的网站，或每个用户在首次加载时看到不同内容的场景。

优点

• 搜索引擎易于索引
• 尤其是在网络连接速度较慢的情况下，加载速度更快。

缺点

• 服务器负载很高，因为服务器必须在每次请求时都构建页面。
• 应用程序页面之间的切换速度较慢。

静态站点生成（SSG）

使用静态网站生成(SSG)时，服务器只需构建一次网站页面及其静态资源，然后将其发布到内容分发网络 (CDN) 上。之后对网页的任何请求都将从 CDN 提供。在 SSG 中，页面通常在应用程序构建期间生成。

何时使用服务器端生成

SSG 可用于内容频繁更改的网站，例如博客。

优点

• CDN缓存带来高性能
• 即使后端服务中断，静态 HTML 页面仍会始终提供。

缺点

• 如果内容变化迅速，CDN 提供的页面内容很容易过时。

增量静态再生（ISR）

这种概念在Next.js中最为流行。ISR与 SSG非常相似，它们的工作原理基本相同，但ISR更进一步。静态页面在CDN上发布一段时间后，CDN上的页面会被失效，并重新生成一个包含最新数据的页面版本。这样，我们就可以将SSG用于频繁更新的数据。

何时使用增量静态生成？
我们可以将ISR用于网站，以便按页面向客户提供最新的更新，而无需重新部署网站，并享受SSG的优势。

优点

• 服务器负载降低
• 内容分发速度非常快
• 无需重建/部署网站来显示新内容。

缺点

• 可能需要额外的配置步骤

这些页面渲染技术应用于不同的场景，各有优缺点。大多数现代应用程序通常会结合使用多种技术，例如 SSG + CSR 或 ISR + CSR。将这些技术结合起来，可以完美兼顾网站性能和SEO两方面。