客户端渲染 & 服务器端渲染

# Web 开发# JavaScript

**客户端渲染**，也称为 CSR，浏览器使用 JS 渲染页面本身。服务器不会从服务器发送现成的页面，而是提供 JavaScript，该 JavaScript 将在浏览器中运行并在用户与网站交互时构建内容。我们有很多客户端渲染网站的例子，例如 Facebook 和其他社交媒体，因为它们需要持续的页面加载。

过程：

  • 服务器发送初始 HTML 文件。
  • 客户端从服务器下载JS代码。
  • JS代码输出最终的UI。
    • Image description

    优点：

    - 更具动态和交互性的网络应用程序。

    - 为用户和每次加载提供更流畅的体验。

    - 它减少了对服务器端请求的额外需要。

    缺点：

    - 初始加载时间较慢。

    **服务器端渲染**，也缩写为 SSR，是指服务器编写并向客户端发送包含所有动态内容的完整 HTML 页面。然后，浏览器只需显示页面，无需执行任何额外工作。因此，由于所有处理都发生在服务器端，因此用户可以更快地查看内容。例如，我曾在某处读到 wordpress 和 github 是基于服务器端渲染的（如果我错了，请纠正我）

    过程：

  • 服务器接收网页请求，检索所需的数据，填充 HTML，并应用必要的样式。
  • 现在，完全呈现的页面由服务器发送到浏览器显示。
  • 在页面初始加载的情况下，不需要任何类型的 JS。
  • 后续的用户交互和更新都由客户端的JS渲染来管理。
    • Image description

    优点：

    - 第一次加载速度更快。

    - 即使网络速度较慢，也能获得更好的用户体验。

    缺点：

    - 需要更多的服务器负载。

    - 多次请求时会很慢。

    简而言之：

    Image description

    最后，我要补充一点自己的观点，对于将交互性和用户参与度视为首要方面的应用程序，例如社交媒体或具有大量客户端逻辑的 Web 应用程序，CSR 是最好的选择。但是，在内容繁重的情况下，例如对 SEO 更感兴趣且初始加载速度较快的网站，SSR 将是更好的选择。这取决于应用程序的性质和目标受众。

    因此，通过仔细分析优势和劣势，开发人员可以决定采用平衡性能、可用​​性和可搜索性的正确渲染策略。

    祝您编码愉快。谢谢。