SSR和CSR区别

SSR：Server-side rendering （server 服务器）（side有边的意思 所以在这里
翻译为服务器的一边也就是服务器端）而rendering 的意思则是渲染的意思

CSR：Client-side rendering（Client则是客户端的意思）后边的英文则和上边
一样了

在做区别之前我们先了解一下SSR和CSR的渲染过程分别是什么样的

SSR：服务器端渲染 
1. 用户输入url地址 客户端向服务器发送url请求
2.服务器接收到客户端的url请求后 直接对网页文件进行操作 例如（模板引擎）
然后将网页文件中需要的数据直接放到这个文件中 此时这个时候已经将文件的
渲染处理好了 然后再发给客户端 （也就是把文件渲染任务做好之后再发给客户端）
3. 浏览器拿到渲染好了的网页文件 直接渲染在页面上

CSR：客户端渲染
1. 用户输入url地址 客户端向服务器发送url 请求数据
2. 服务器接收到请求 将html css js等文件 ”不做任何操作“返回给客户端
3. 接收到文件后 从上到下开始解析文件 但是在这个过程中如果遇到了类似于
ajax请求这种还需要再次像服务器请求数据的操作就会再去向服务器请求一次
然后服务器再把请求的内容返回给客户端
4.客户端拿到二次请求的数据 开始将数据渲染到相对应的位置然后展现出来

相同上边的对比理解：
1. 服务器端渲染相比于 客户端渲染 会至少多一次 客户端到服务器的请求 这也就
会导致浏览器的首屏加载速度变慢 因此就有了服务器端渲染也就是SSR

来说一下SSR和SCR各自的优缺点
CSR：客户端渲染
优点：
1. 前后端分离 开发效率高
2. 用户体验好 因为SPA 单页面应用的开发模式
缺点:
1. 前端响应速度慢 特别是首屏 可能会导致用户流失
2. 不利于SEO优化 因为客户端渲染页面的代码中只有一个空代码 SEO爬虫无法
获取关键词 
（那么为什么会出现代码只有空代码的情况呢？）
这里说一下
因为 我们的CSR客户端渲染是一种叫做动态渲染的渲染方式
我们回顾一下流程 解析html css js文件 过程中 我们页面中的大部分DOM元素
都是通过js插入的 但是js文件是需要下载解析的 但是在下载解析之前 就已经开始
构建DOM树了  所以在一开始会是一个空壳子 需要等待下载好了 js文件并解析完毕后
才会有内容
那为什么SSR服务器端渲染不会出现这种空壳子的情况呢？
因为通过上边我总结的表也能看出来 在第一次发送url请求的时候 服务器就开始
帮助我们进行对html文件的渲染和组装了 当服务器端返回的时候 返回回来的会是
一个已经全部渲染完的html文件 我们客户都也就是前端只需要负责渲染就行了
所以不会出现这种空壳子的情况

SSR：服务器端渲染
优点: 
1. 尽量不占用前端的资源 ，前端只需要负责呈现 耗时少，速度快
2. 有利于SEO优化 因为在后端有完整的html页面 也就是MPA多页面应用模式
所以爬虫更容易获取信息
（这里稍微说一下我理解的SPA和MPA 
SPA：单页面应用 看他的名字也能知道他就是一个单页面 而路由跳转其实都是
组件嵌套的关系 也就是局部更新 页面没有改变 
MPA：多页面应用 每次跳转路由都会是一个新的页面 每次跳转都会刷新页面
因为是全新的一个页面 所以他是全部更新 相比于单页面应用的局部更新肯定是
没有单页面应用的模式加载内容快的 因为 一个是只加载一部分需要修改的内容
一个是需要全部加载 这一点显而易见 但是MPA有完整的html页面所以在SEO优化
也就是爬取关键词这方面相比于SPA肯定也是优于SPA的）

缺点：
1. 不利于前后端分离，主要工作在后端 前端显示没啥用 开发效率慢
2. 前端首屏响应速度变化，但是加大了服务器的压力