CSR 和 SSR 分别是什么?

CSR

客户端渲染 (Client-Side Rendering) ：指网页内容的生成和渲染主要在用户浏览器端（客户端）完成。
当用户访问一个网站时，服务器首先返回一个基本的HTML结构（通常包含必要的脚本标签和样式表引用），这个结构中通常不含或仅含少量静态内容。
随后，浏览器下载并执行这些脚本（通常使用JavaScript框架如React、Vue、Angular等），脚本从服务器或API获取数据，然后动态生成并渲染网页的实际内容。

特点：

• 延迟加载：初始加载时，用户可能先看到一个空白页面或占位符，随着脚本执行和数据加载完成，页面内容逐步填充。
• 动态交互：由于内容在客户端渲染，页面更新和交互响应通常更快，用户体验更流畅。
• SEO挑战：搜索引擎爬虫可能无法正确抓取到动态生成的内容，对SEO友好性有一定影响，需要额外的SEO优化措施（如预渲染、SSR配合等）。

SSR

服务端渲染 (Server-Side Rendering)： 服务器端渲染是指网页内容的生成和初步渲染在服务器端完成。
当用户访问网站时，服务器接收到请求后，直接生成完整的HTML页面（包括数据填充），并将这个完整的页面发送给浏览器。
浏览器接收到后，可以直接呈现给用户，无需等待额外的脚本执行。

特点：

• 快速首屏渲染：用户几乎立刻能看到页面主要内容，首屏加载速度快，改善用户体验，尤其是对于低网速或弱设备的用户。
• SEO友好：搜索引擎爬虫可以直接抓取到服务器返回的完整HTML，包含所有的内容信息，有利于SEO优化。
• 服务器负载较高：服务器需要承担更多的计算和渲染工作，可能增加服务器负担，尤其是在高并发场景下。此外，服务器端渲染的代码通常需要兼顾服务器和客户端环境，增加了开发复杂性。

总结来说，CSR和SSR各有优劣，适用于不同的场景。CSR强调客户端的交互性和动态性，适合对交互要求较高、SEO需求不迫切的现代Web应用。

而SSR重视首屏加载速度和SEO优化，更适合内容为主的网站、需要快速呈现首屏内容的场景以及对SEO有严格要求的应用。

实际项目中，有时还会采用同构（Isomorphic）或预渲染（Prerendering）等混合策略，结合CSR和SSR的优点，以适应不同需求。