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

嘿，程序员们！
我们都同意，新时代的 JavaScript 彻底改变了现代网站的结构和用户体验。如今的网站更像是一个应用程序，伪装成一个能够发送电子邮件、通知、聊天、购物、支付等功能的网站。如今的网站非常先进，互动性很强，但在过去，网站和 Web 应用程序遵循一个共同的策略。它们在服务器端准备 HTML 内容发送到浏览器；然后在浏览器中，这些内容被渲染成带有 CSS 样式的 HTML。

传统上，浏览器从服务器接收 HTML 并进行渲染。当用户导航到另一个 URL 时，需要刷新整个页面，服务器会为新页面发送全新的 HTML。这称为服务器端渲染。

快进到今天。网站需要渲染数千行代码，结构也更加复杂。如今，网站不再仅仅是静态页面。当网站不再仅仅允许用户执行操作并接收响应时，SSR 的衰落就出现了。因此，开发人员将日益流行的网页渲染方法转向了客户端。

但是，问题是：

1. SSR 还适用吗？如果适用，该在哪里使用？
2. 最适合您的方法是什么？

服务器端渲染

在 SSR 中，当用户向网页发出请求时，服务器会从数据库获取所需数据，准备 HTML 页面，并通过互联网发送到用户的机器。然后，浏览器会在用户界面上呈现所有请求的操作。从数据库获取数据到创建 HTML 页面并将其发送到客户端，所有这些过程只需几毫秒即可完成。

如果您的网站需要的只是显示图像/文本、点击链接，并且更偏向静态，则此方法是可行的。

在服务器端渲染的页面中，通常使用 jQuery 代码片段来为每个页面添加用户交互。然而，在构建大型应用时，仅使用 jQuery 是不够的。毕竟，jQuery 主要是一个用于 DOM 操作的库，而不是一个框架；它没有为你的应用定义清晰的结构和组织。

客户端渲染

由于现代开发主要围绕 JS 库和框架，开发人员正在逐渐关注 CSR。现代 JS 的流行将所有注意力转移到了 CSR 上。

客户端渲染意味着网站的 JavaScript 代码在浏览器中渲染，而不是在网站服务器上渲染。因此，现在我们不再从 HTML 文档中获取所有内容，而是只渲染包含 JS 文件的 HTML 代码。首次上传的渲染时间可能会稍慢一些。然而，由于我们无需等待每次页面渲染，因此下一页的加载速度会非常快。此外，每次调用服务器后也无需重新加载整个 UI。客户端框架会通过仅重新渲染特定的 DOM 元素来根据数据变化更新 UI。

此外，清晰的客户端-服务器分离对于规模更大的工程团队来说更具扩展性，因为客户端和服务器代码可以独立开发和发布。在 Grab，当多个客户端应用访问同一个 API 服务器时，这一点尤其重要。

为了更清楚地了解这两种渲染方法的优点和缺点，让我们看看它们各自的优缺点：

SSR 的好处 -

1. 由于需要渲染的代码较少，因此网站的初始页面加载速度更快。
2. 适合最小和静态的网站。
3. 搜索引擎可以抓取网站以获得更好的 SEO。

SSR 的缺点 -

1. 站点互动较少。
2. 页面渲染缓慢。
3. 完整的 UI 重新加载。
4. 频繁的服务器请求。

企业社会责任的好处 -

1. 应用程序的响应速度更快，并且用户不会看到由于整页刷新而导致的页面导航之间的闪烁。
   1. 对服务器发出的 HTTP 请求更少，因为每次加载页面时不必再次下载相同的资产。
   2. 客户端和服务器之间清晰的关注点分离；您可以轻松为不同平台（例如移动设备、聊天机器人、智能手表）构建新的客户端，而无需修改服务器代码。您还可以在不违反 API 契约的前提下，分别修改客户端和服务器上的技术栈。

企业社会责任的缺点 -

1. 由于加载多个页面所需的框架、应用程序代码和资产，初始页面加载更重。
2. 您的服务器上还需要执行一个额外的步骤，即将其配置为将所有请求路由到单个入口点，并允许客户端路由从那里接管。
3. 大多数情况下，需要外部库。
4. 所有搜索引擎在抓取过程中都会执行 JavaScript，因此它们可能会在您的页面上看到空白内容。这会无意中损害您应用的搜索引擎优化 (SEO)。

然而，大多数情况下，在构建应用程序时，SEO 并非最重要的因素，因为并非所有内容都需要被搜索引擎收录。为了解决这个问题，您可以使用服务器端渲染应用程序，或者使用诸如 Prerender 之类的服务来“在浏览器中渲染 JavaScript，保存静态 HTML，然后将其返回给爬虫”。

何时使用服务器端渲染

1. 应用程序的 UI 非常简单，页面/功能较少
2. 应用程序的动态数据较少
3. 网站的阅读偏好大于写作
4. 重点不在于丰富的网站，而且用户很少

何时使用客户端渲染

1. 应用程序具有非常复杂的 UI，包含许多页面/功能
2. 应用程序具有大量动态数据
3. 网站的写作偏好大于阅读
4. 重点是丰富的网站和大量的用户

渲染方法完全取决于客户的需求和用户体验计划。最终决定使用 SSR 还是 CSR 取决于您。
希望本文能帮助您理解渲染实践的基本概念。
感谢您阅读到最后！