谈谈前后端分离

1.首先我们先看看SPA

SPA全称是single page application（单页面应用），它是一种网络应用程序（webAPP）模型。传统网站里面，不同页面的切换一般是直接从服务器加载一整个新页面，而SPA这个模型，则是通过动态的重写页面的部分与用户交互，避免了过多数据交换。即是只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源，公共资源（js,css等）仅仅需要加载一次。常用于PC端官网、购物等网站。

常见的几个SPA框架：AngularJS  React   Vue.js

SPA的优点：

   （1）前后端分离，分工明确、接口明确

   （2）提高开发效率，减少前后端沟通成本

   （3）页面之间切换很快

   （4）一定程度上减少了后端服务器的压力

   （5）后端程序只需要提供API，不用管客户端是web还是手机等。

缺点：

   （1）首屏打开速度满，因为用户首次加载需要下载框架及代码，再渲染页面

   （2）不利于SEO

 

2.SEO

SEO就是 Search Engine Optimization，即搜索引擎优化，SEO是通过了解搜索引擎的运作规则来调整网站，以提高该网站排名。然而，对于目前的搜索引擎而言，对于异步数据的支持还不足（即当你使用AJAX获取数据时，很难保证页面能被搜索引擎收录到），为了解决这个问题，就提出了SSR

3.SSR

SSR即是 Server-Side Rendering(服务器端渲染)。普通的SPA中，一般是将框架以及网站页面代码发送到浏览器，然后在浏览器中生成和操作DOM，（因此这是第一次访问SPA网站在同等情况下比传统的在后端生成HTML发送到浏览器要慢的原因。）实际上，也可以将SPA应用打包到服务器上，在服务器上渲染出HTML发送到浏览器上，这样的HTML页面还不具备交互能力，因此还需要与SPA框架配合，在浏览器上混合成可交互的应用程序。所以，合理运用SSR技术，不仅能一定程度上解决首屏慢的问题，还能获得更好的SEO。

SSR常用框架

 React 的Next

 Vue.js 的Nuxt

 

4.MPA

 MultiPage Application,即多页面应用。

多页面跳转刷新所有资源，每个公共资源需要选择性重新加载，常用于app或客户端等。

5.SPA与MPA对比

 

SPA与MPA具体对比分析表

	SPA	MPA
组成	一个外壳页面和多个页面片段	多个完整页面
资源共用	共用，只需外壳部分加载	不共用，每个页面都需要加载
刷新方式	页面局部刷新或者更改	整页刷新
url模式	a.com/#/pageone.html	a.com/pageone.html
用户体验	页面片段间切换快，用户体验良好	页面切换加载缓慢、流畅度不够、用户体验差
转场动画	容易实现	无法实现
数据传递	容易	依赖url传参、cookie、localStorage等
SEO	需要单独方案，实现困难，可使用SSR优化	实现方法简易
开发成本	较高，常需要专业框架	较低，但页面重复代码多
维护成本	容易	复杂

参考资料

1. https://www.jianshu.com/p/fcb98533bc18

2.https://juejin.im/post/5a0ea4ec6fb9a0450407725c