客户端渲染（CSR）与服务器端渲染（SSR）

客户端渲染(CSR)：

• 在客户端渲染中，初始HTML内容很小，不包含页面的完整内容。
• 页面作为空壳加载，JavaScript捆绑负责渲染和填充内容。
• 渲染过程发生在客户端，通常在浏览器中使用JavaScript。
• 数据获取和渲染是动态执行的，随着用户与应用程序的交互而进行。
• 这种方法提供了更交互式的用户体验，但可能导致初始页面加载时间较慢。

示例：单页面应用程序(SPA)，内容丰富的动态应用程序。

服务器端渲染(SSR)：

• 服务器端渲染涉及在服务器上呈现组件并将生成的HTML发送到客户端。
• 服务器执行组件代码并将完全呈现的HTML响应返回给客户端。
• 这种方法提供更快的初始页面加载时间和更好的搜索引擎优化，因为完整的HTML内容可供搜索引擎爬虫使用。
• 数据可以在服务器上获取和呈现，为客户端提供预填充状态。
• 服务器端渲染适用于需要快速提供初始内容并具有良好的搜索引擎可发现性的应用程序。

示例：通用或同构应用程序，内容驱动的网站。

渲染策略的选择取决于诸如应用程序要求、性能目标、动态内容、SEO考虑以及开发者偏好等各种因素。在某些情况下，可以使用这些渲染方法的组合，例如在初始页面加载时使用服务器端渲染，然后在后续交互中切换到客户端渲染。

评估应用程序的具体需求并考虑每种渲染方法的权衡，以确定最合适的渲染方式是至关重要的。

为什么SSR比CSR更快?

在比较服务器端渲染(SSR)和客户端渲染(CSR)时，重要的是考虑性能的不同方面：

(1) 初始页面加载时间：

• SSR可以提供更快的初始页面加载时间，因为服务器呈现完整的HTML内容并将其发送到客户端。客户端接收到一个完全呈现的页面，准备显示。
• 另一方面，CSR需要客户端下载最小的HTML内容，然后执行JavaScript进行渲染和填充页面。这一额外步骤可能导致内容对用户可见的时间较长。

(2) 交互时间(TTI)：

• TTI指的是页面变得交互和对用户输入响应的时间点。
• SSR可以提供更快的TTI，因为初始HTML内容可能已包含一些预渲染的数据和功能。用户可以在页面加载后立即开始与页面交互。