客户端渲染和服务端渲染（CSR和SSR）

SSR

(Server Side Rendering) ：传统的渲染方式，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。

SSR优点

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

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

SSR缺点

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

CSR

CSR(Client Side Rendering)：是一种目前流行的渲染方式，它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。

CSR优点

FP最快 客户端体验较好，因为在数据没更新之前，页面框架和元素是可以在dom生成的

FP：仅有一个 div 根节点。以VUE为例，div#app 注册一个空的div FCP：包含页面的基本框架，但没有数据内容。以VUE为例，每个template中的div框架，对应VUE生命周期的mounted FMP：包含页面所有元素及数据。以VUE为例，通过接口更新到页面的数据后完整的页面展示；对应VUE的生命周期中的updated

简而言之，就是数据拼接HTML字符串这件事放在服务端还是客户端造成了两者区别。

CSR缺点

不利于SEO–爬虫数据不好爬呀~~ 整体加载完速度慢

两者有何不同

服务器端渲染的优势在于首屏渲染速度块，简单来讲它不需要来回多次往返于客户端和服务端。但是其性能等众多因素会影响用户体验，比如说：网速，在线活跃人数，服务器的物理位置等等。而客户端渲染则和服务端渲染相反，因为多次和服务器的交互导致首屏加载速度慢。但一旦这些请求完成之后，用户和页面之间的交互时用户体验就会好很多。

用一个现实生活的例子来看：假如从超市买东西吃，以SSR的角度来看，你每次在超市买完随即吃完再走，每次饿了都需要出发去超市。而从CSR的角度来看，就是你从超市购买许多原材料再拿回家去自己煮，多了能放冰箱，这样每次肚子饿了就不需要每次都往超市跑，唯一麻烦一点在于你得花时间挑选食材。

简而言之，SSR强在首屏渲染。而CSR强在用户和页面多交互的场景