SSR和CSR的区别

SSR：Server side render
将组件或页面通过服务器生成html字符串，再发送到浏览器，简单理解下来，发了一个请求，服务器返回的不是接口数据，而是一整个页面的HTML结构，再结合界面之前定义的CSS把页面展示出来；VUE 服务器渲染文档
SSR优点
例如SEO–因为访问一个请求，返回的就是页面全部的HTML结构，包含所需要呈现的所有数据，于是例如搜索引擎或者爬虫的数据抓取；

目前使用MV*架构的项目，大都是前后端分离，数据都是动态生成，不利于SEO优化
利于首屏渲染性能高–首屏的页面加载来自于服务器，不依赖与服务端的接口请求再数据处理；

SSR缺点
性能全都依赖于服务器
前端界面开发可操作性不高
CSR：Client side render
通过接口请求数据，前端通过JS动态处理和生成页面需要的结构和页面展示
CSR 优点
FP最快
客户端体验较好，因为在数据没更新之前，页面框架和元素是可以在dom生成的
在CSR的FP术语之间，和FP相类似的术语还有：FCP和FMP；
FP：仅有一个 div 根节点。以VUE为例，div#app 注册一个空的div
FCP：包含页面的基本框架，但没有数据内容。以VUE为例，每个template中的div框架，对应VUE生命周期的mounted
FMP：包含页面所有元素及数据。以VUE为例，通过接口更新到页面的数据后完整的页面展示；对应VUE的生命周期中的updated
CSR的缺点
不利于SEO–爬虫数据不好爬呀~~
整体加载完速度慢
优化首屏加载，减少白屏时间，提升加载性能：
加速或减少HTTP请求损耗：使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置 Access-Control-Max-Age 减少预检请求，页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等；
延迟加载：非重要的库、非首屏图片延迟加载，SPA的组件懒加载等；
减少请求内容的体积：开启服务器Gzip压缩，JS、CSS文件压缩合并，减少cookies大小，SSR直接输出渲染后的HTML等；
浏览器渲染原理：优化关键渲染路径，尽可能减少阻塞渲染的JS、CSS；
优化用户等待体验：白屏使用加载进度条、loading图、骨架屏代替等；
以上优化方案的中的技术术语
强缓存和协商缓存

强缓存是利用http头中的Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间
协商缓存：浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间；当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存；其中Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识
Access-Control-Max-Age：缓存可以被缓存的时间

DNS 预解析：浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。

Gzip页面压缩，像服务器发送压缩文件，同时服务器需要设置解析

---

作者：WionWan
来源：CSDN
原文：https://blog.csdn.net/u012036171/article/details/88833200
版权声明：本文为博主原创文章，转载请附上博文链接！