React 中的客户端渲染是什么？

---

客户端渲染是一种用于 Web 开发的技术，用于提高网页的性能。它将浏览器的渲染过程从服务器转移到客户端。这样，就不需要进行往返请求来渲染页面。

让我们首先讨论一下当您的程序需要客户端渲染时会发生什么。React 应用程序是通过从简单的 HTML 文档调用一个或多个 JavaScript 模块来开发的，同时仅使用 CLI 或 React 命令 create-react-app。

每个页面的 HTML 由 JavaScript 创建并加载到网站中，JavaScript 会自动将其添加到文档的仪器模型中。所有操作都发生在该客户端侧。

让我们探讨一下 React.js 中的客户端渲染是什么 -

关于客户端渲染

客户端渲染是一种相对较新的渲染网站的方法，它是在 JavaScript 库开始支持它之后才开始流行的。

当您讨论客户端渲染时，指的是使用 JavaScript 在网页上显示信息。

客户端渲染是在客户端生成 HTML 的过程，无需向服务器发送请求。

因此，只获得一个包含 JS 脚本的最小 HTML 文件进行早期加载；然后使用 Web 服务器渲染网站的其余部分，而不是直接从 HTML 文件接收所有内容。此过程可以加快页面加载速度并使交互更流畅。

使用客户端渲染时，第一页加载速度有点慢。但是，此后每个后续页面加载速度都很快。此方法仅与服务器通信以获取运行时信息。

此外，每次调用网站后，都不需要重新加载完整的用户界面。

客户端系统可以通过仅重新渲染特定 DOM 组件来使用更新的数据刷新用户界面。目前，用于客户端渲染的框架中最显著的示例是 React.js 和 Angular。

React.js 中的客户端渲染

在 React 中，客户端渲染由其核心功能之一 - 虚拟 DOM 支持。虚拟 DOM 是一个存储 DOM 树副本的 JavaScript 对象，可用于

快速比较真实 DOM 树。React 利用这一点，只更新已更改的内容以节省处理时间并加快网站加载速度。

服务器端渲染和客户端渲染之间的主要区别在于，使用服务器端渲染，浏览器仅在请求时从服务器接收 HTML，而使用客户端渲染，浏览器还从服务器获取 JavaScript，然后在显示任何内容之前执行它，这意味着只要后端的数据发生变化，就不需要重新加载或刷新页面。

React 中的客户端渲染比服务器端渲染快得多，因为浏览器和服务器之间的往返次数更少。相反，您的所有 JSX 都将发送到您的浏览器，以便您可以立即渲染您的应用程序！

客户端渲染的工作原理？

客户需要通过使用 Web 服务器和地址访问任何 Web 内容（链接）。

当客户端最初请求站点时，主机将静态内容（Html 和 CSS）发送到客户端的 Web 服务器。

HTML 信息应首先下载，然后下载 JavaScript，由用户的浏览器下载。这些 Html 文档链接到 JavaScript。加载操作在客户观察到网站开发人员指定的加载指示器时开始。客户端尚无法访问网站。

客户端的网页在下载 JavaScript 后不断生成信息。

由于客户端浏览并与网站互动，因此在线内容变得可用。由于此过程，初始加载时间延长了。

在简短的介绍性加载时间后，网站的浏览速度将非常快且无缝，只需 API 请求即可自动检索信息。

为什么要使用客户端渲染？

客户端渲染是一种允许 Web 浏览器显示网站内容而无需等待从服务器下载整个页面的技术。

此技术的一些好处是它可以加快页面加载速度、使搜索引擎更快地索引您的内容以及帮助 SEO。

• 速度 - 客户端渲染总的来说很快。似乎有几个变量可能会影响速度，包括您的网络速度、CPU 的计算能力、API 的响应时间以及您的 Web 主机响应请求的速度。

• 客户请求 API 信息 - JavaScript 可以自动生成您的网站，同时允许它通过 API 并发访问数据库。您的网站通常会在填充数据库文件之前获取灵活的 HTML。客户端的响应和对任何 API 的请求时间都比服务器慢。

• 客户操作 - 必须记住，当应用程序使用客户端渲染时，用户 CPU 处理所有 JavaScript 功能。通常，这不会太苛刻，并且大多数计算机必须能够处理它。网站应该显示得非常快。您可能会注意到，在某些情况下拥有客户端的操作并非最佳选择，例如在廉价或旧的 PC 上，这些 PC 的处理器速度较慢。

优缺点

客户端渲染对于 Web 主机来说成本更低，因为它减少了对其资源的压力，因为整个渲染责任都由用户承担。

此外，它是 JavaScript 网页的标准设置，这使得 Web 开发人员在客户端渲染方面比在服务器端渲染方面更容易。

• 查看者可以浏览您的网页，而无需来回访问服务器。这为您的网站提供了快速、几乎类似于原生应用程序的体验。

• 客户端渲染的应用程序不需要网站。您的应用程序可以轻松地托管在任何 CDN 或静态文件服务器上，例如 Amazon S3。有许多免费选项可用于托管客户端渲染的应用程序。

当在客户端渲染中使用 JavaScript 时，浏览器更难以分析站点的输出，导致 SEO 明显下降。

为了使搜索引擎优化取得成功，内容需要在搜索引擎的结果页面上得到适当的渲染、索引和排名。对于使用客户端渲染的网站，情况并非总是如此。

客户端渲染的缺点

• 客户端渲染的应用程序需要通过 API 网关进行中间轮询才能进行渲染。因此，与具有类似功能的静态或服务器端渲染的应用程序相比，您的网站将始终加载得更慢。

• 在较慢的计算机和移动设备上，客户端渲染可能会使加载时间增加几秒钟。由于此原因，用户可能会变得不耐烦并在网站完全加载后离开。

• 客户端渲染的应用程序通常存在 SEO 问题。尽管 Google 做出了相反的承诺，但使用 JavaScript 的网站在搜索结果中的排名通常很差。当加载时间过长时，您的网站可能会被归类为空白页面。

结语

大多数 Web 应用程序都是服务器端渲染的。这会在服务器上渲染页面，然后将其发送给用户。这样做的缺点是页面加载需要很长时间，有些人可能需要等待很长时间才能看到任何内容。

客户端渲染的应用程序加载速度更快，因为浏览器在加载内容之前不需要等待来自服务器的请求。缺点是此类应用程序可能出现更多问题，例如当 HTML 文件或 JavaScript 代码发生更改时。