Web应用程序的客户端呈现和服务器端呈现的比较早些时候，网站和Web应用程序有一个共同的策略要遵循。他们准备要发送到服务器端浏览器的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）提供支持。客户端渲染场景的正常Web渲染过程遵循以下步骤：用户向网站发送请求（通常通过浏览器）。可以使用CDN（内容分发网络）代替服务器来为用户提供静态HTML、CSS和支持文件。浏览器首先下载HTML，然后是JS。同时，用户会看到一个加载符号。浏览器获取到JS后，通过AJAX发起API请求获取动态内容，并进行处理渲染最终内容。服务器响应后，在客户端浏览器中使用DOM操作来呈现最终内容。在CSR呈现的第三步，用户看到的只是一个空白屏幕。由于此过程涉及在客户端获取和处理数据，因此该过程称为客户端渲染。比较两种呈现模式由于这两种方法处理内容的方式不同，因此每种方法都有其优点。让我们从用户和网络的角度比较CSR和SSR。网页加载时间网页加载时间是将请求发送到服务器和在浏览器上呈现请求之间花费的时间。当涉及到您的网站或Web应用程序的用户体验(UX)时，这是一个重要方面。CSR和SSR的页面加载时间在两种情况下不同：首页加载时间首页加载时间是用户首次加载您的网站所花费的平均时间。第一次加载时，在CSR中，浏览器一次加载基本的HTML、CSS和所有必需的脚本，然后将HTML编译成浏览器可用的内容。这次通常不仅仅是从服务器获取预编译的HTML和相应的脚本。因此，当涉及到首页加载时间时，SSR通常花费的时间更少。下一页的加载时间第二页加载时间是从一个页面导航到另一个页面所花费的平均时间。在这种情况下，CSR的加载时间更快，因为CSR的所有支持脚本都提前加载了。它不会向服务器发送请求，除非它需要加载一个惰性JavaScript模块。但是，对于SSR，会重复第一个页面加载后的完整请求周期。这意味着SSR对页面加载时间几乎没有影响。因此，在这种情况下，CSR响应速度更快。这里需要注意的是，上述推论没有考虑网络方面。我们相信客户端和服务器在网络上的带宽相当。对缓存的影响为了加速繁重的Web应用程序，每个浏览器和Web服务器都采用缓存机制来缓存客户端计算机上的可重用脚本。这缩短了CSR和SSR的加载时间。然而，企业社会责任有一个主要好处。在CSR中，基于CSR的Web应用程序也可以在没有互联网的情况下运行（除非您调用数据API），只要它不需要延迟加载模块。加载后，应用程序不再需要向服务器发送请求。这允许像浏览简单的桌面应用程序一样浏览Web应用程序。但是，在SSR中，请求总是发送到服务器。所以SSR的页面加载时间肯定比CSR长。缓存确实提高了SSR的内容渲染速度，因为浏览器需要从缓存中检索必要的脚本。下图描述了浏览器如何处理对缓存脚本的重复请求：请注意，大多数脚本是从内存或磁盘加载的。这大大缩短了加载时间并防止服务器负载过大。如何选择正确的呈现解决方案动态内容加载服务器通常驻留在具有更高计算能力和更高网络速度的机器上。凭借这种速度和容量，它在处理预期数量的处理请求时永远不会耗尽资源。结果，在服务器上获取内容变得相对更快。另一方面，客户端计算机的计算能力有限，在客户端获取和呈现动态内容可能需要更长的时间。这意味着获取渲染内容所花费的总时间会更长。因此，如果你的网站涉及动态内容的重复渲染，SSR是比CSR更好的选择。Web应用程序UX与网站UX尽管它们看起来几乎相同，但Web应用程序和网站是两种不同的Web内容格式。Web应用程序是一个完整的应用程序，可用于会计、CRM、人力资源管理、项目管理等用途。另一方面，网站提供信息内容。Web应用程序比网站涉及更多的用户交互。在用户交互较多的场景下，保证用户交互时间不会太长很关键。因此CSR比SSR更适合web应用。另一方面，对于网站来说，客户端每次点击都加载一个新页面是可以接受的，因为缓存通常负责加速渲染。此外，SSR还确保为爬虫提供正确的元数据——这使得SSR比CSR更适合网站。结论CSR和SSR对于您计划提供给用户的UX至关重要。我希望本文能帮助您从功能和实践的角度理解这些概念。最后的选择最终是你的。考虑到上述因素，明智地选择。错误的选择可能会让您重新开发整个网站或Web应用程序。正确的选择可能会减少您将来的代码管理工作。更多Jerry原创文章在这里：《王子熙》：
