了解 Next.js 中的 CSR：客户端渲染解释

CSR（客户端渲染）是一种在客户端渲染页面的方法，这意味着它不在服务器上运行。 CSR 本质上与 SPA（单页应用程序）相同，因此如果您熟悉 SPA 是什么及其工作原理，那么您就已经了解了 CSR。但如果你不确定什么是 SPA 或者它是如何运作的，我会在下面向你解释。

在这篇文章中，我将描述什么是 SPA 以及它是如何工作的。之后，我会将其与 Next.js 中的 CSR 进行比较，并向您展示如何在 Next.js 项目中实现 CSR。

什么是水疗？

SPA（单页应用程序）由单个 HTML 页面组成，该页面根据需要动态重写内容，而不是为每次交互加载新的 HTML 页面。

MPA 是如何运作的？

在了解SPA之前，首先应该了解MPA。让我们来了解一下：

在 SPA 流行之前，网站是使用多页面应用程序 (MPA) 方法构建的。那么海洋保护区是如何运作的呢？想象一下，作为一名开发人员，您想要创建一个具有两个页面的网站：主页（“/”）和关于页面（“/about”）。要使用多页方法构建此文件，您需要为每个路由创建两个单独的 HTML 文件：main.html 表示“/”，about.html 表示“/about”。

在每个 HTML 文件中，您必须为该页面编写特定的 HTML、CSS 和 JavaScript 代码。但是，代码的某些部分（例如页眉和页脚）在所有两个页面中都是相同的。即使页眉和页脚相同，作为开发人员，您也必须在每个 HTML 文件中重复它们。

当项目完成并部署在服务器上时，服务器将完整的 HTML 页面以及所有请求的资源发送给用户。例如，当用户第一次访问主页时，服务器发送准备好的main.html文件，用户稍等片刻就可以看到内容。这种方法有利于 SEO，因为当搜索引擎爬虫访问您的网站时，它可以看到 HTML 文件中的所有内容，因为它是预先完全渲染的。

但是，当用户导航到另一个页面（例如“/about”）时，该过程会再次开始。服务器发送 about.html 文件及其所有资源（CSS、JS 等）。用户必须再次等待页面加载，如果互联网连接速度较慢，则等待时间会更长。更低效的是，用户必须再次下载相同的页眉和页脚代码，即使它们没有改变。在当今的 Web 开发实践中，这种重复的代码（如页眉和页脚）既浪费又低效。

水疗如何运作？

现在您已经了解了 MPA（多页面应用程序）的工作原理，接下来让我们深入了解 SPA 的工作原理。

由于每次请求加载页面的延迟、代码的重复以及每次都需要重建整个 DOM，因此引入了 SPA 来解决这些问题。

假设您是一名开发人员，正在创建一个具有两条路线的网站：“/”和“/about”。在 SPA 框架中，只有一个名为 index.html 的 HTML 文件。您无需为每个路由创建单独的 HTML 文件，而是为每个页面创建组件并动态加载它们。例如，您将创建三个组件 - 每个路由一个，并将它们导入到您的 index.html 中。

在 SPA 中，您还可以将网站的可重用部分（例如页眉和页脚）分成自己的组件。您无需为每个页面编写相同的页眉和页脚代码，只需在需要时导入这些组件，类似于函数的工作方式。这减少了重复并使开发变得更容易。

当你的SPA项目部署到服务器上时，服务器不再渲染页面内容。相反，它提供 index.html 文件以及包含您的组件的 JavaScript 包。渲染发生在客户端的浏览器中。

当用户第一次访问您的网站时，服务器会发送index.html 文件以及必要的JavaScript 文件。与 MPA 相比，这可能会导致更长的等待时间，因为整个 DOM 是在 JavaScript 完全下载、解析和执行后构建的。

但是，一旦加载初始页面，在 SPA 中页面之间的导航就会快得多。例如，如果用户从 / 导航到 /about，则浏览器不需要重新加载整个页面。由于页眉和页脚等常见元素已加载，因此浏览器仅获取更改的特定内容（例如 /about 页面内容）的 JavaScript。 DOM 动态更新，无需刷新整个页面，让用户感觉他们正在与应用程序而不是传统网站进行交互。这提供了更流畅、更“像应用程序”的体验。

但是，SPA 也有缺点，尤其是在 SEO 方面。由于初始的index.html 文件包含最少的内容（大部分数据是通过JavaScript 加载的），搜索引擎爬虫可能会看到一个空页面并且难以对内容建立索引。这就是为什么 SPA 中的 SEO 比传统 MPA 更具挑战性。

CSR 与 SPA 方法相同吗？

是的，CSR（Client-Side Rendering）是一种渲染方式，意思是将组件转换成可以在浏览器中显示的格式，让用户看到页面的过程。要理解的关键是 CSR 完全发生在浏览器中。对于 React 和 Next.js，CSR 的工作方式相同，在客户端渲染方面两者没有区别。

例如，在CSR中，当您第一次访问网站时，服务器会发送一个内容最少的index.html文件。但问题是——这个文件还没有完整的内容。下载所有必要的组件文件（JavaScript、CSS 等）后，实际内容将在浏览器中呈现。然后，React 构建 DOM 树（文档对象模型），然后创建虚拟 DOM，它就像真实 DOM 的轻量级副本。

一旦 DOM 和虚拟 DOM 设置完毕，用户就可以看到页面了。这个渲染过程发生在浏览器中，将所有组件转换为可显示的页面。

现在，当用户从一个页面导航到另一个页面（例如从 / 到 /about）时，React 会为新页面构建一个新的虚拟 DOM。它将旧的虚拟 DOM 与新的虚拟 DOM 进行比较，找到差异，并将这些更改应用到真实 DOM。比较和更新 DOM 的过程高效进行，并且全部发生在浏览器中。

所以，总而言之，CSR 在 React 和 Next.js 中的工作方式是相同的。渲染发生在浏览器中，React 使用虚拟 DOM 高效处理 DOM 更新，使用户体验流畅、快速。

如何在 Next.js 中实现 CSR？

如果您在组件中使用 useEffect 等客户端方法，而不是 getStaticProps 或 getServerSideProps 等服务器端方法，您的页面将按照 CSR（客户端渲染）方法在客户端上渲染。这意味着浏览器在加载初始 HTML 后处理渲染。

此外，使用 SWR 或 TanStack Query 等库也可以启用 CSR，因为这些库在页面加载后处理客户端中的数据获取。这样，您的组件就会在浏览器中呈现，并且任何数据更新都在客户端无缝发生，无需服务器端参与。

结论

CSR是一种在客户端渲染我们的项目的方法，它本质上与SPA（单页应用程序）的定义相同。 React 使用 CSR 进行渲染，这是 MPA（多页面应用程序）和 SPA 之间的主要区别之一。 Next.js 也使用了 CSR，因为它是基于 React 构建的，但为了改进 SEO 和增强用户体验，Next.js 添加了 SSG、ISR 和 SSR。您可以阅读有关 SSR、ISR 和 SSG 的信息。如果您想了解我的最新文章，请关注我的网站 https://saeed-niyabati.ir。感谢您的阅读！暂时再见！

以上是了解 Next.js 中的 CSR：客户端渲染解释的详细内容。更多信息请关注PHP中文网其他相关文章！