服务器端渲染（SSR）和客户端渲染（CSR）的区别，以及优化首屏的一些思考

今天考虑一个项目性能问题的时候想到这个知识点，想着就梳理一下：

SSR：Server side render

• 将组件或页面通过服务器生成html字符串，再发送到浏览器，简单理解下来，发了一个请求，服务器返回的不是接口数据，而是一整个页面的HTML结构，再结合界面之前定义的CSS把页面展示出来；VUE 服务器渲染文档

SSR优点

• 例如SEO–因为访问一个请求，返回的就是页面全部的HTML结构，包含所需要呈现的所有数据，于是例如搜索引擎或者爬虫的数据抓取；

  • 目前使用MV*架构的项目，大都是前后端分离，数据都是动态生成，不利于SEO优化

• 利于首屏渲染性能高–首屏的页面加载来自于服务器，不依赖与服务端的接口请求再数据处理；

SSR缺点

• 性能全都依赖于服务器
• 前端界面开发可操作性不高

---

CSR：Client side render

• 通过接口请求数据，前端通过JS动态处理和生成页面需要的结构和页面展示

CSR 优点

• FP最快
• 客户端体验较好，因为在数据没更新之前ÿ