SSR和CSR是什么?

SSR是什么?

SSR是指服务器端渲染（Server-Side Rendering），从本质上讲，服务器端渲染是指在服务器上渲染网页，而不是在浏览器中。当用户请求一个页面时，服务器负责完成渲染工作并将一个完全渲染好的页面发送到客户端，然后客户端的 JavaScript 接管并添加交互功能。这就像是在厨房里由服务员完成准备工作，浏览器只需要将菜品摆盘上桌。

CSR是什么?

CSR（Client-Side Rendering）是前端开发中最常见的渲染方式。在这种模式下，服务器主要负责提供静态的HTML文件（可能包含一些基本的HTML结构和JavaScript脚本），而真正的页面渲染工作则完全由客户端的浏览器来完成。这意味着页面内容是在用户的浏览器上动态生成的。

SSR的优缺点

优点：

首屏加载速度快：由于服务器已经生成了完整的HTML页面，因此客户端可以直接显示这个页面，无需等待JavaScript加载和执行。

SEO友好：搜索引擎爬虫可以很好地解析由服务器生成的HTML页面内容，有利于SEO优化。

适合复杂页面：对于包含大量数据、需要复杂计算的页面，SSR可以更好地处理并减少客户端的负载。

缺点：

服务器压力大：对于每个请求，服务器都需要重新渲染页面，这可能导致服务器压力过大。

开发限制：SSR要求开发者在编写Vue组件时，需要考虑到服务器端和客户端环境的差异，不能过度依赖客户端环境。

调试困难：SSR的调试过程相对复杂，需要同时考虑到服务器端和客户端的日志和错误信息。

CSR的优缺点

优点：

响应速度快：一旦HTML文件加载完成，浏览器就可以开始渲染页面，而不需要等待服务器返回完整的渲染结果。

动态性强：由于页面渲染在客户端进行，因此可以方便地实现各种动态交互效果。

前端部署简单：只需要一个静态服务即可部署前端代码，降低了部署成本。

缺点：

首屏加载时间长：由于需要加载整个JavaScript包，可能导致首屏加载时间较长，特别是对于复杂的单页应用（SPA）。

不利于SEO：搜索引擎爬虫可能无法很好地解析由JavaScript动态生成的页面内容，导致SEO效果较差。

白屏时间：在JavaScript代码加载和执行期间，用户可能会看到空白的页面，即所谓的“白屏时间”,需要使用预加载,懒加载,骨架屏,代码分割这些策略来优化白屏时间。