服务器端渲染 (Server-side Rendering)
服务器端渲染 (Server-side Rendering, SSR) 是一种将网页的渲染逻辑放在服务器端完成的技术。在 SSR 中，服务器接收到客户端请求后，根据请求的路由和参数，执行相应的业务逻辑，并将最终渲染好的HTML页面返回给客户端。客户端收到HTML页面后，可以直接展示给用户。
服务器端渲染的优点包括：
- 更好的SEO：搜索引擎可以直接抓取和索引服务器端渲染的HTML内容，以提供更好的搜索结果。
- 更快的首次加载时间：由于客户端只需要展示渲染好的HTML页面，因此首次加载时间可以更短。
- 更好的性能表现：当用户第一次访问网站时，可以直接展示服务器端渲染的HTML，无需等待客户端渲染完成。
然而，服务器端渲染的缺点也是显而易见的：
- 服务器负载较大：因为服务器需要完成HTML页面的渲染工作，所以需要更多的计算资源。
- 页面转换开销：在每次用户与页面交互时，都需要向服务器发送请求并接收响应，导致了额外的网络开销。
- 较少的交互功能：由于服务器端渲染只能提供静态的HTML页面，所以交互逻辑较为受限。
客户端渲染 (Client-side Rendering)
客户端渲染 (Client-side Rendering, CSR) 是一种将网页的渲染逻辑放在客户端浏览器上完成的技术。在 CSR 中，服务器只返回一个包含基本框架的HTML页面，然后客户端通过发送请求获取数据，并在浏览器中使用JavaScript将数据渲染为最终的HTML内容。
客户端渲染的优点包括：
- 更好的交互性和用户体验：由于大部分渲染工作都在客户端完成，因此可以实现更丰富的交互功能，提供更好的用户体验。
- 更小的首次加载时间：由于只需加载基本的HTML骨架，首次加载时间可以更短。
- 较少的服务器负载：服务器只需要提供数据接口，不需要进行复杂的页面渲染。
然而，客户端渲染也存在一些缺点：
- 较差的SEO：由于搜索引擎抓取的是初始的HTML，其中可能没有具体数据，因此不利于搜索引擎的优化。
- 首次白屏时间长：由于需要先下载基本的HTML骨架，然后再下载数据和渲染脚本，导致了首次白屏时间较长，用户体验可能不佳。
- 对浏览器性能要求较高：相比服务器端渲染，客户端渲染需要更多的计算资源，对用户的设备性能要求较高。
结论
服务器端渲染和客户端渲染各自有其适用的场景。服务器端渲染适用于需要较好SEO和首次加载性能的情况，而客户端渲染适用于需要更好的交互性和用户体验的情况。
对于某些复杂的单页面应用，可以考虑使用更灵活的混合渲染模式，将一些静态的页面使用服务器端渲染，而将需要较强交互性的部分使用客户端渲染。这样可以兼顾SEO和用户体验。根据具体业务和需求，选择适合的渲染方式，才能让网站达到更好的性能和用户体验。
本文来自极简博客，作者：冬天的秘密，转载请注明原文链接：了解服务器端渲染和客户端渲染的差异
