简单来说，客户端渲染、服务器端渲染和 SSG

介绍

作为一名 Web 开发者，这或许不是你第一次听到这些术语。如果是第一次，我相信你一定很想知道这些技术之间的异同，因为它们几乎无处不在，而且对于你作为一名 Web 开发者来说至关重要（几分钟后你就会明白为什么！）。
你可能读过一些很棒的文章和资源，它们试图解释这些术语，但你仍然会忘记，或者根本不知道其中一些内容究竟在说什么。我希望这篇文章能成为你理解 CSR、SSR 和 SSG 的最后一篇文章，并且使用你容易理解的词汇和示例。如果你相信这是可能的，那就让我们一起行动吧！

服务器端渲染（SSR）

在 SPA（单页应用程序）和 Web 应用出现之前，SSR 是开发网站和应用程序的传统方法。事实上，在 Web 早期，流行的是 Web 页面的概念。一家公司开发了一个落地页来宣传其产品，该页面内容很少，子页面也很少（如果有的话），这些子页面通常都是静态文本和图像，不向用户呈现任何形式的交互。
这种架构是 Web 开发中最古老的，主要基于客户端-服务器通信，客户端请求页面，服务器发送已生成的 HTML 文件。在这种类型的开发中，服务器负责大部分繁重的任务，例如将 HTML 渲染和解析为有用的文件，而浏览器或客户端所做的只是将静态文件渲染给用户。

那么，什么是 Web 服务器呢？根据维基百科：

Web 服务器是通过 HTTP（为分发 Web 内容而创建的网络协议）或其安全变体 HTTPS 接受请求的计算机软件和底层硬件。

如果您不太理解这个定义，下面是进一步的解释：

1. 底层组件-> 典型的 Web 服务器由两部分组成：软件组件和硬件组件。软件组件包括安装在服务器上的操作系统、数据库、文件系统等。硬件组件包括计算机内存（例如 RAM）、处理器、电源芯片等。

   1. Web 内容-> 服务器主要提供静态内容，即不会更改的文件。例如 HTML 文件、图片和 CSS。
   2. HTTP（超文本传输​​协议） ->它只是一组标准和规则，指定如何在互联网上的实体（例如客户端和服务器）之间共享信息和资源。
   3. HTTPS（超文本传输​​协议安全） -> 它是 HTTP 的更安全变体，为互联网上实体之间的通信增加了额外的安全层。

您甚至可以创建一个 Web 服务器。您的 PC 或台式电脑，如果安装了操作系统（软件）并配备不间断电源，可以根据系统内存容量（硬件）为任何可以连接的人提供一些网站服务。Web
服务器的例子包括 Apache、Nginx（发音为“engine x”）、Google Web Server (GWS) 等。另一方面，客户端是指任何请求服务器上任何内容的设备。客​​户端的一个例子就是用户的浏览器。

下图展示了服务器端渲染的网页如何传递给最终用户：

这种传统方法肯定有其优点，但也有一些缺点，这就是为什么会出现 CSR 和 SSG 等新兴技术来最大限度地减少缺点，同时保留优点。

下面讨论一些优点和缺点：

优点

• 有利于搜索引擎优化 (SEO) -> 由于服务器发送已经生成的页面内容，因此网页可供网络爬虫程序随时索引，这有助于我们的网站在搜索引擎中的排名。

• 适用于静态站点-> SSR 青睐静态站点，因为它们几乎不需要用户交互，这有助于减少服务器的负载并最大限度地减少计算能力和资源使用。

缺点

• 不适合用户交互性高的应用-> 对于需要大量用户输入且基于重复的客户端-服务器通信的应用，使用 SSR 开发并非明智之举。这是因为每次访问页面、每次点击按钮或最终用户执行任何基于事件响应的操作时，都会向服务器发出请求。这样做会给服务器带来沉重的负载，并可能影响服务器性能，在更糟糕的情况下，甚至导致服务器关闭。

• 后续页面加载缓慢-> SSR 网页的初始加载时间通常很快，但是当发出后续页面请求时，即使标记没有更改，也会再次获取内容。

• 频繁的服务器请求-> 在该系统中，客户端每次需要显示网页时，都必须向服务器发出请求。这样一来，服务器的访问次数过多，增加了服务器的负载，并可能对服务器的计算能力和整体性能造成压力。

• 浏览器 API 不可用-> 由于大多数页面内容都是在服务器上处理和呈现的，因此实际上无法与仅在客户端可访问的浏览器 API 进行交互。

我们可以用于服务器端渲染的技术示例有 NextJS、GatsbyJS 等。

如果出现以下情况，请考虑 SSR：

• 您正在构建的网站不需要最终用户交互。例如新闻网站、个人博客等。
• 您需要交付的网页数量很少，请考虑使用 SSR。

客户端渲染（CSR）

CSR 与 SSR 完全相反。在这里，浏览器全权负责解析、渲染和显示页面内容。随着单页应用程序 (SPA) 的出现，CSR 变得非常流行。这种开发架构严重依赖于用户的浏览器（客户端）在内容显示给用户之前对其进行处理、解析和渲染。其工作原理是，服务器向浏览器发送一个几乎为空的 HTML 文件，以及网站功能所需的 JavaScript 代码（因为服务器无法运行 JS 代码）。然后，浏览器解析并编译此代码，然后使用其自身的资源将 HTML、JS 代码和 CSS 填充到网页中，之后页面内容最终呈现给用户，并且用户操作（例如单击按钮提交表单）才会执行。

由于网络的发展，企业社会责任 (CSR) 应运而生。网络已经不再仅仅为终端用户提供静态内容和响应迟钝的网页，这些网页几乎无法提供任何有趣的用户体验。

在构建客户端渲染的应用程序时，您不太可能不使用任何浏览器 API。事实上，构建客户端渲染应用程序时，根本不可能不使用任何浏览器 API。这是因为这些 API 是提供交互式应用程序所必需的，而服务器不提供任何 API。您离不开的浏览器 API 之一是文档对象模型 API (DOM API)。当然，您可能不知道其中一些 API 正在被使用，但您在项目中使用的第三方库可能正在后台使用它。

通常情况下，CSR 应用程序需要在客户端（即浏览器）启用 JavaScript 才能渲染内容。以这个 React 应用程序为例：

这是一个用 引导的简单反应应用程序yarn create react-app。

如果您运行此命令来创建一个新的 React 项目，然后启动开发服务器，localhost:3000如果一切顺利，您应该会看到该应用程序在您的浏览器中运行：

现在，如果您的浏览器上出现上述内容，则表示 JavaScript 当前已在您的浏览器中启用。现在，我们将禁用它以查看我们的应用是否能按预期工作。要在您的浏览器上禁用 JavaScript，如果您使用的是 Chrome，请CTRL + Shift + J在 Windows 上使用 打开开发人员工具。然后使用 打开“设置”选项卡Shift + ?，向下滚动到“调试器”，然后在其下方选中显示 的框Disable JavaScript。
重新加载页面，然后您会发现您的应用看起来与以前不一样了。动画的 React 徽标消失了，我们之前看到的所有内容都不再显示。页面是空的，只有一条文字，写着您需要启用 JavaScript 才能运行此应用程序。

如果您完全不了解 React 是什么或它是如何工作的，也没关系。如果您使用其他客户端 JavaScript 库/框架（例如 Vue、Svelte 等），结果也基本相同。
这只是一个 React 中的基础应用，旨在演示 JavaScript 在任何客户端渲染应用程序中的重要性。

附注：在浏览器中将页面内容渲染给用户的过程本身就是一个主题，本文不会深入探讨。不过，我会在文章末尾提供一些资源链接，以巩固你对浏览器渲染的理解。

CSR技术示例

其中包括大多数 JavaScript Web 框架和库，例如 ReactJS、NextJS、VueJS、AngularJS 等。

客户端渲染的优缺点

虽然如今许多 Web 应用程序都基于此架构构建，但我们必须关注这项技术的优缺点，并以此帮助我们确定哪种技术最适合我们的开发需求。

优点

• 非常适合具有高用户交互性的应用程序->这种类型的开发中产生的服务器 - 客户端请求很少，因此，基于这种架构运行的网站和应用程序非常适合需要大量用户交互的应用程序。

• 快速的后续页面加载时间-> CSR 应用程序的初始阶段会下载构建整个网站所需的所有代码和资源。由于大多数路由在初始页面加载期间已获取，因此无需服务器请求页面加载所需的资源，因此后续页面的加载时间通常更快。

缺点

• 初始加载时间缓慢-> 由于首次加载时发送到浏览器的 HTML 文件几乎为空，并且接收了大量代码，因此页面内容的渲染速度很慢。如果客户端网速较慢，他们在屏幕上看到的可能只是一个空白页（或者是一个用来吸引用户耐心的花哨加载动画），这会严重影响用户体验。

• 搜索引擎优化 (SEO) 不佳-> 当浏览器忙于解析服务器代码时，网络爬虫会扫描我们的网站以查找链接和文本，而它们看到的只是一个几乎空白的页面或几个链接和文本，因此它们会忽略我们的网站并转到其他具有更好 SEO 的网站。

在以下情况下考虑企业社会责任：

• 构建交互式且功能丰富的应用程序。例如，聊天应用等。

静态站点生成 (SSG)

顾名思义，静态站点生成是指对服务器上不会发生变化的内容进行预渲染。在静态站点生成 (SSG) 中，静态页面内容在构建时渲染，而服务器端渲染 (SSR) 则在运行时或请求时渲染页面内容。

什么是构建时？它是指开发人员运行代码，优化构建网站所需的所有静态文件，并在服务器上渲染，然后交付到内容分发网络 (CDN)，最终将这些页面提供给用户的过程。
它与 SSR 非常相似，并且比 SSR 具有许多优势，我们将在下面讨论。

优点

• 初始页面和后续页面加载速度快-> 静态网站的内容已在服务器上预渲染，这使得初始加载时间非常快。后续页面加载速度也很快，因为网站内容已被 CDN 缓存，CDN 会在请求时直接分发这些页面，而无需等待它们再次渲染。

• 最新内容-> 静态网站具有最新的页面内容，因为每次更改后都会重建网站，并且用户在每次页面请求时始终拥有更新的内容。

• 良好的 SEO -> SSG 呈现出良好的 SEO，就像 SSG 中一样。

• 安全性-> 静态站点通常具有更好的安全风险保护，因为它们托管在 CDN 上，CDN 可以提供额外的保护层来抵御恶意攻击。

缺点

• 频繁重建页面-> 当对静态生成的站点进行更改时，需要在每次更改后执行重建，以便为用户提供最新的内容。

• 构建时间与网站内容成正比-> 当您需要构建数百甚至数千个页面时，构建时间可能会比想象的更长。这意味着构建时间会随着页面和内容的增长而增长。

静态站点生成器的示例包括 Next、Gatsby、Hugo、Eleventy 等。您可以查看Staticgen获取可能符合您需求的生成器的完整列表。

在以下情况下请考虑 SSG：

• 您正在构建一个主要功能是传递内容的网站，以及一个拥有数百或数千个（好吧，我夸张了，也许不是）页面的大型网站。
• 您正在构建您的下一个博客网站。

呼，真是太多了！没想到这篇文章这么长。总之，恭喜你读到这里！

结论

我们能否选择最适合自身开发需求的技术，无疑将决定我们构建的应用程序的整体性能和健康状况。现在您知道了为什么理解这些技术背后的基本原理和理念至关重要。
我相信，现在您应该能够在构建下一个精彩的 Web 项目时，做出明智的选择！
阅读本文后，我希望您能够自信地回答任何关于 CSR、SSR 或 SSG 的问题！

来吧，我们做个朋友

如果您发现这篇文章有帮助，您可以考虑关注我，以获取有关全栈 JavaScript 开发的更多内容！

你也可以在推特上打招呼😊

再见！