客户端渲染 (CSR)

客户端渲染 (CSR) 是现代 Web 开发中的一种常见技术，用于创建交互式和动态应用程序。通过这种技术，我们消除了服务器呈现页面的责任，并将其带到客户端，让服务器处理对它来说最重要的业务规则。通过这种分离，可以提供更加流畅、动态的用户体验，并可以创建新型应用程序。优点是多种多样的，但同时也存在权衡，必须在每个项目中评估是否值得采用这种技术。

什么是客户端渲染（CSR）？

客户端渲染或简称CSR，是一种动态应用程序开发技术，其中界面渲染发生在客户端（浏览器）。这与该技术流行之前的做法不同，在这种技术流行之前，服务器负责渲染页面，将包含所有内容的 HTML 文件返回给客户端。

通过 CSR，我们将渲染页面的角色传递给浏览器（客户端）。服务器仅发送一个基本的 HTML 文件，该文件内部包含指向 Javascript 文件的链接。收到此 HTML 后，浏览器将下载负责呈现页面内容的引用的 Javascript 文件。 CRS的优点是，一旦加载了Javascript文件，内容就可以动态更新，而不依赖于对服务器的新请求。使用户的浏览体验更加流畅。 CSR 通常用于需要实时交互或非常动态的内容的应用程序，例如单页应用程序（SPA）。作为不需要 SEO 的内部页面、仪表板或系统的解决方案。

客户端渲染如何工作？

使用客户端渲染的渲染流程示例如下：

1. 用户访问网页，该网页内部向服务器发送请求。
   

2. 服务器接收请求并通过发送基本 HTML 进行响应，其中几乎仅包含 JavaScript 和 CSS 文件的链接。
   

3. 浏览器下载此 HTML，完成后发送新请求以下载 HTML 中引用的 JavaScript 和 CSS 文件。
   

4. JavaScript 文件下载完毕后，它们将被执行，并执行渲染页面的过程。
   

5. 从现在开始，JavaScript 控制整个应用程序和用户交互，动态更新页面内容，而不需要向服务器发出新请求。

客户端渲染的优点

• 速度：CSR 内的页面之间的导航速度非常快，因为在初始加载后无需向服务器发出多个请求。
• 用户体验：CSR 的使用非常容易理解并且性能良好，提供类似于本机应用程序的体验。
• 关注点分离：CSR实现了前后端分离，让前端完全由JS管理，而后端只关心数据和业务逻辑。

客户端渲染的缺点

• 高 JS 负载：在大型应用程序中，JS 文件可能会变得非常重，这会损害用户体验，尤其是在初始应用程序负载时。
• SEO 问题：由于页面内容在客户端呈现，搜索引擎很难对内容建立索引，因为它们需要呈现的 HTML，而在具有 CSR 的应用程序中，HTML 实际上是空的。这对于依赖 SEO 的应用程序来说可能是一个缺点，例如登陆页面和电子商务。
• 客户端依赖：由于应用程序在客户端运行，因此依赖于它拥有的资源量，如果用户的设备资源很少，这可能会对用户体验产生负面影响。此外，如果设备禁用了 JavaScript 执行，应用程序将无法运行。

结论

在本文中，我们介绍了使用企业社会责任的要点，介绍了其基本原理及其优缺点。通过CSR流程，我们了解CSR生命周期的主要阶段。我们可以看到 JavaScript 在提供完全在客户端运行的应用程序方面的重要性。 尽管 CSR 在用户体验方面有好处，但很明显，这种渲染技术存在一些与高 JavaScript 负载和 SEO 相关问题相关的缺点。

为了克服 CSR 的局限性，我们提供了静态站点生成（SSG）和服务器端渲染（SSR）等解决方案。在 SSG 中，页面是在 build 期间静态生成的，从而生成可以交付给客户端的 HTML。对于 SSR，渲染是在服务器端完成的，服务器端以已经渲染到客户端的 HTML 进行响应。

以上是客户端渲染 (CSR)的详细内容。更多信息请关注PHP中文网其他相关文章！