React的服务器端渲染（SSR）和客户端渲染（CSR）有什么区别？

React的服务器端渲染（SSR）和客户端渲染（CSR）是两种不同的页面渲染方式，它们各自有不同的特点和适用场景：
服务器端渲染（SSR）

1. 页面渲染: 页面在服务器上生成，然后将完整的HTML发送给客户端。

2. SEO: 由于搜索引擎爬虫可以直接访问到完整的页面内容，因此对搜索引擎优化（SEO）更为友好。

3. 首屏加载时间: 由于HTML内容已经生成，首屏加载时间较短，可以更快地展示页面内容给用户。

4. 服务器负载: 服务器需要承担渲染页面的责任，可能会增加服务器的负载。

5. 交互性: 页面加载完成后，JavaScript 会在客户端执行，使得页面变得交互性。

6. 数据获取: 通常在服务器上获取数据，然后将数据作为HTML的一部分发送给客户端，或者在客户端进行二次数据请求。

7. 适用场景: 对于内容型网站，特别是需要良好SEO的网站，SSR是一个不错的选择。
   客户端渲染（CSR）

8. 页面渲染: 页面的初始HTML通常是一个空的或包含基本模板的文档，JavaScript 会在客户端执行以生成完整的页面内容。

9. SEO: 由于页面内容是由JavaScript动态生成的，因此对SEO不够友好，除非使用特殊的SEO处理方法，如预渲染或服务端渲染。

10. 首屏加载时间: 首屏加载时间可能较长，因为需要等待JavaScript下载、解析和执行。

11. 服务器负载: 服务器不需要承担渲染页面的责任，负载较低。

12. 交互性: 页面的交互性完全依赖于JavaScript在客户端的执行。

13. 数据获取: 通常在客户端通过API请求获取数据，然后动态渲染页面。

14. 适用场景: 对于交互性强的Web应用，如单页应用（SPA），CSR可以提供更好的用户体验。

区别总结

• 渲染位置: SSR在服务器上渲染，CSR在客户端渲染。
• SEO: SSR通常对SEO更友好，CSR可能需要额外的处理来优化SEO。
• 首屏加载时间: SSR的首屏加载时间通常更短，CSR可能需要更长时间。
• 服务器负载: SSR会增加服务器负载，CSR则不会。
• 数据获取: SSR可能在服务器上获取数据，CSR通常在客户端获取数据。
• 用户体验: SSR可以更快地展示内容，但CSR在完全加载后可以提供更流畅的用户体验。

选择使用SSR还是CSR，或者两者的结合（如使用Next.js的混合渲染），取决于应用的具体需求、目标用户群体以及性能要求。

更多前端面试题 需要的同学转发本文+关注+【点击此处】即可获取！ 加油复习