SSR 和 CSR区别

SSR（Server-Side Rendering）和 CSR（Client-Side Rendering）是两种不同的前端渲染方式，它们在处理页面渲染的方式和性能方面有一些关键的区别。

1. Server-Side Rendering (SSR)：

在 SSR 中，页面的初始渲染是在服务器端完成的。服务器接收到请求后，执行页面的渲染逻辑，生成 HTML，并将完整的 HTML 文档发送到客户端。客户端接收到 HTML 后，仍然会加载和执行 JavaScript，但这通常是用于激活页面上的交互，而不是初始渲染。

主要特点和优势：

• 更快的首次加载：因为初始渲染是在服务器上完成的，用户在第一次访问页面时能够更快地看到内容。
• 更好的SEO：搜索引擎能够直接获取到渲染完成的 HTML，有利于页面的搜索引擎优化。

2. Client-Side Rendering (CSR)：

在 CSR 中，初始页面的渲染是由客户端的浏览器完成的。服务器会返回一个基本的 HTML 文件和一些包含 JavaScript 的标签。浏览器下载并执行这些 JavaScript，然后通过 JavaScript 动态地渲染页面内容。

主要特点和优势：

• 更快的页面切换：一旦初始页面加载完成，后续的页面切换通常更快，因为只需要加载和渲染数据，而不需要重新获取整个 HTML 文档。
• 更丰富的交互体验：由于页面的渲染和交互逻辑都发生在客户端，可以实现更复杂的交互体验和动画效果。

区别总结：

1. 首次加载性能： SSR 在首次加载时更快，因为服务器端已经生成了完整的 HTML。CSR 首次加载时需要下载并执行 JavaScript，因此可能会有一些延迟。

2. SEO： SSR 对搜索引擎更友好，因为搜索引擎可以直接获取渲染完成的 HTML。CSR 对SEO的支持相对较弱，需要通过一些技术手段来优化。

3. 页面切换性能： CSR 在页面切换时通常更快，因为只需要加载数据和部分内容，而不需要重新获取整个 HTML。

4. 服务器压力： SSR 需要在服务器端进行页面渲染，可能增加服务器的压力。CSR 的渲染发生在客户端，服务器的负担较轻。

在实际项目中，选择使用 SSR 还是 CSR 取决于具体的业务需求、性能要求和开发团队的技术栈。有时候也会采用一些混合的方案，如使用SSR来提高首次加载性能，然后在客户端使用CSR来实现更复杂的交互体验。