原文链接

The Web Page Rendering Dilemma

关于网页渲染的讨论是最近几年才出现的。早些时候，网站和网络应用程序有一个共同的策略要遵循。他们准备了要发送到服务器端浏览器的 HTML 内容；然后在浏览器中将该内容呈现为带有 CSS 样式的 HTML。

JavaScript 框架采用了一种完全不同的 Web 开发方法。 JavaScript 框架带来了减轻服务器负担的可能性。

借助 JavaScript 框架的强大功能，可以通过仅请求所需的内容来直接从浏览器呈现动态内容。在这种情况下，服务器只提供必要的基本 HTML 包装器。这种转换为访问者提供了无缝的用户体验，因为加载网页所需的时间很少。此外，一旦加载，网页就不会再次重新加载。

在本文中，我们将讨论这些技术上不同的网页渲染方法。我将解释每种方法之间的主要区别，并为您建议一种方法。

服务器端渲染

服务器端渲染或 SSR 是在浏览器上渲染网页的传统方式。如上所述，呈现动态网页内容的传统方式遵循以下步骤：

用户向网站发送请求（通常通过浏览器）
服务器在遍历页面内的服务器端脚本后检查资源、编译和准备 HTML 内容。
这个编译后的 HTML 被发送到客户端的浏览器以进行进一步的渲染和显示。
浏览器下载 HTML 并使网站对最终用户可见
浏览器然后下载 Javascript (JS) 并在执行 JS 时使页面具有交互性

注意，在服务器端渲染的第二个步骤，客户可以浏览从服务器发送过来的静态页面，但是无法互动，因为 JavaScript 尚未下载到客户端。

在这个过程中，获取动态内容、将其转换为 HTML 并将其发送到浏览器的所有负担都在服务器上。因此，此过程称为服务器端渲染 (SSR)。提前渲染完整 HTML 的责任伴随着服务器的内存和处理能力的负担。与没有动态内容要呈现的静态站点的页面加载时间相比，这会增加页面加载时间。

客户端渲染

客户端呈现或 CSR 是处理网页以在浏览器中显示的不同方法。在 CSR 中，编译动态内容并为它们生成 HTML 的负担转移到客户端的浏览器。

这种方法由 JavaScript 框架和 ReactJS、VueJS 和 Angular 等库提供支持。客户端渲染场景的正常网页渲染流程遵循以下步骤：

用户向网站发送请求（通常通过浏览器）。
可以使用 CDN（内容交付网络）代替服务器来为用户提供静态 HTML、CSS 和支持文件。
浏览器先下载 HTML，然后再下载 JS。同时，用户会看到一个加载符号。
浏览器获取 JS 后，通过 AJAX 发出 API 请求以获取动态内容并对其进行处理以呈现最终内容。
服务器响应后，在客户端浏览器中使用 DOM 处理呈现最终内容。

在 CSR 渲染的第三步，用户只能看到一个空白的屏幕。

由于此过程涉及在客户端获取和处理数据，因此该过程称为客户端渲染。

两种渲染模式的对比

由于这两种方法处理内容的方式不同，因此每种方法都有其优点。让我们从用户和 Web 的角度比较 CSR 与 SSR。

web page 加载时间

网页加载时间是从请求被发送到服务器到它在浏览器上呈现之间所花费的时间。当涉及到您的网站或 Web 应用程序的用户体验 (UX) 时，这是一个重要方面。 CSR 和 SSR 的网页加载时间在两种情况下是不同的：

首页加载时间

第一页加载时间是用户第一次加载您的网站所用的平均时间。在首次加载时，在 CSR 中，浏览器一次加载基本 HTML、CSS 和所有所需的脚本，然后将 HTML 编译为浏览器上可用的内容。

这一次通常不仅仅是从服务器获取预编译的 HTML 和相应的脚本。因此，当涉及到第一页加载时间时，SSR 通常需要更少的时间。

接下来页面的加载时间

第二个页面加载时间是从一个页面导航到另一个页面所花费的平均时间。在这种情况下，由于 CSR 的所有支持脚本都是提前加载的，因此 CSR 的加载时间更快。除非需要加载惰性 JavaScript 模块，否则它不会向服务器发送请求。

但是，对于 SSR，在第一页加载中遵循的完整请求周期是重复的。这意味着 SSR 对网页加载时间几乎没有任何影响。因此，在这种情况下，CSR 响应更快。

这里需要注意的是，上述推论并未深入考虑网络方面。我们相信客户端和服务器在网络上具有相当的带宽。

对缓存的影响

为了加速繁重的 web 应用程序，每个浏览器和 web 服务器都采用缓存机制来缓存客户端机器上的可重用脚本。这改善了 CSR 和 SSR 的加载时间。然而，CSR 有一个主要的好处。

在 CSR 中，只要不需要延迟加载模块，基于 CSR 的 Web 应用程序也可以在没有互联网的情况下运行（除非您调用数据 API）。加载后，应用程序不再需要向服务器发送请求。这允许浏览 Web 应用程序，就像一个简单的桌面应用程序。

然而，在 SSR 中，总是向服务器发送请求。因此，与 CSR 相比，SSR 的页面加载时间无疑更长。缓存确实提高了 SSR 的内容渲染速度，因为浏览器需要从缓存中检索必要的脚本。下图描述了浏览器如何处理对缓存脚本的重复请求：

请注意，大多数脚本是从内存或磁盘加载的。这大大缩短了加载时间并防止了服务器上的过度负载。

如何选择合适的渲染方案

Dynamic Content Loading

服务器通常驻留在具有更高计算能力和显着更高网络速度的机器上。凭借这种速度和能力，它在处理预期数量的处理请求时永远不会耗尽资源。结果，在服务器上获取内容变得相对更快。

另一方面，客户端计算机的计算能力有限，在客户端获取和呈现动态内容可能需要更长的时间。这意味着获取呈现的内容所消耗的总时间会更长。因此，如果您的网站涉及重复的动态内容呈现，SSR 是比 CSR 更好的选择。

Web Application UX vs Website UX

尽管它们看起来几乎相同，但 Web 应用程序和网站是两种不同的 Web 内容格式。 Web 应用程序是一个完整的应用程序，可用于会计、CRM、人力资源管理、项目管理等目的。另一方面，网站提供信息内容。

与网站相比，Web 应用程序涉及更多的用户交互。在用户交互较高的场景中，确保用户交互不会花费很长时间是至关重要的。因此，与 SSR 相比，CSR 更适用于 Web 应用程序。

另一方面，对于网站，如果每次点击都加载新网页，对于客户来说也能接受，因为缓存通常会负责加速渲染。此外，SSR 还确保为爬虫提供正确的元数据——与 CSR 相比，这使得 SSR 更适合网站。

结论

CSR 和 SSR 对于您计划提供给用户的 UX 至关重要。我希望本文能帮助您从功能和实用的角度理解这些概念。最终的选择最终是你的。考虑到上述因素，明智地选择。错误的选择可能会让您重新开发整个网站或 Web 应用程序。正确的选择可能会减少您将来的代码管理工作。

更多Jerry的原创文章，尽在：“汪子熙”:

Web 应用客户端渲染和服务器端渲染的比较相关推荐

SAP UI渲染模式：客户端渲染 VS 服务器端渲染
今年由于疫情原因,SAP一年一度的DKOM(Developer Kick-Off Meeting)切换成了线上模式,刚刚于昨天圆满落幕. 时间过得真快,去年的DKOM仿佛还历历在目:SAP成都研究院数 ...
Angular Universal 学习笔记 - 客户端渲染和服务器端渲染的区别
https://github.com/angular/universal Universal 的命名由来: We believe that using the word "universal ...
【大前端之前后分离01】JS前端渲染VS服务器端渲染
前言之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的:但是如何说服团队使用前端渲染方案却是一个现 ...
前端渲染、服务器端渲染、同构渲染
一.引很久前,几乎所有网站都使用 ASP.Java.PHP 这类做后端渲染,但是前几年 jQuery.Angular.React.Vue 等 JS 框架的大行其道,大家转向了前端渲染.从 2014 ...
react 服务器端渲染_服务器端渲染React应用程序的动手指南
react 服务器端渲染 In the previous article, we described how to make a production build and deploy it to a ...
服务器端渲染（SSR）和客户端渲染
什么是服务器端渲染和客户端渲染? 互联网早期,用户使用浏览器浏览的都是一些没有复杂逻辑的.简单的页面,这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件,浏览器拿到这个html文 ...
关于 SAP UI5 对服务器端渲染 Server Sider Render 的支持问题
之前 Jerry 的公众号文章介绍过 SAP 产品的渲染模式: SAP UI渲染模式:客户端渲染 VS 服务器端渲染关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine ...
服务器端渲染-Vue SSR搭建
阅读建议:建议通过左侧导航栏进行阅读文章简介:本文是Vue.js服务器端渲染的另一种解决方案-SSR(Server-Side Rendering)学习笔记 Vue SSR是什么官方文档解释:Vue ...
前端后分离深入分析 ——浏览器渲染和服务器渲染区别
1.为什么会有服务器渲染与客户端渲染? 首先理解服务器和浏览器客户端之间传递的是什么--HTML,CSS,JavaScript的文件以及数据载体json(xml)等文件,而文件都是静态,之所以动态是应 ...

Web 应用客户端渲染和服务器端渲染的比较