前言
我们开发的时候提到单页面SPA(Single Page Application)应用和多页面应用MPA(Multi Page application),常说单页面应用体验好，但是不好做SEO优化，是什么意思呢？今天我们就带着疑问来研究下两者的差异，只有明确了两者的优劣，我们才能在新的项目中用的游刃有余。
SPA&MPA
单页面应用SPA(Single Page Application)
单页Web应用（single page web application，SPA），就是只有一个Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。在第一次进入页面时会请求一个html文件，刷新清除一下，切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容却变化了。
优点
- 切换速度快：更好的用户体验，让用户在web app感受native app的速度和流畅，页面切换快，页面跳转时，是js渲染，并不需要处理html文件的请求，这样就节约了很多HTTP发送时延，所以我们在切换页面的时候速度很快。
- MVVM：经典MVVM开发模式，前后端各负其责。
- AJAX：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交
- 路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载
- 良好的交互体验: 用户不需要重新刷新页面，获取数据也是通过AJAX异步获取，页面显示流畅
- 良好的前后端工作分离模式: 单页Web应用可以和RESTful规约一起使用，通过REST API提供接口数据，并使用AJAX异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分
- 减轻服务器压力: 服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍
- 共用一套后端程序代码: 不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端
缺点
- 首屏渲染等待时长： 首屏时间稍慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，必须得加载完毕，才能渲染出首屏。相对于多页面应用，首屏时间慢。
- SEO不友好：因为搜索引擎只认识html里的内容，不认识js渲染生成的内容，爬虫只能拿到一个DIV，认为页面是空的，搜索引擎不识别，也就不会给一个好排名，会导致单页应用做出来的网页在搜索引擎上的排名差。
- SEO难度较高: 由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧。
- 前进、后退管理: 由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现。
- 初次加载耗时多: 为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理，如果使用第三方库，建议使用一些大公司的CDN，因此带宽的消耗是必然的。
多页面应用MPA（Multi Page application）
每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站也就是多页网站，也叫多页应用。
优点
- 首页加载速度快:首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。
- 搜索引擎优化效果好（SEO）：搜索引擎在做网页排名的时候，页面跳转 返回HTML,搜索引擎要根据网页的内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在html中，所以这种多页应用SEO排名效果好。
缺点
- 切换慢： 每次跳转都需要发送一个HTTP请求，如果网络状态不好，在页面间来回跳转时，就会发生明显的卡顿，影响用户体验。
总结
Vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于 id为app的DOM元素上，这样会存在两大问题。
- 由于资源请求量大，造成网站首屏加载缓慢，不利于用户体验。
- 由于页面内容通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，不利于SEO。
图形说明
详细对比
| 说明 | 单页面应用模式SPA | 多页面应用模式MPA |
| 应用构成 | 一个页面组成(html挂载于id为app的DOM元素上) | 多个页面组成 |
| 跳转方式 | 一个页面片段删除或隐藏，加载另一个页面片段并显示。片段间的模拟跳转，没有开壳页面 | 页面之间的跳转是从一个页面到另一个页面 |
| 跳转后公共资源是否重新加载 | 否 | 是 |
| URL模式 | http://xxx/xxx.html#page1或http://xxx/xxx.html#page1 | http://xxx/page1.html和http://xxx/page2.html |
| 用户体验 | 页面片段间切换快，用户体验好，适合移动端 | 页面间切换加载慢，不流畅，用户体验差，移动端不建议使用 |
| 能否实现转场动画 | 容易实现（手机APP动效） | 不容易实现 |
| 页面间传递数据 | 页面传递数据容易（Vuex或Vue中的父子组件通讯props对象） | 依赖URL、cookie或者localstorage，实现麻烦 |
| 搜索引擎优化（SEO） | 需要单独方案（SSR） | 直接优化 |
| 适用的范围 | 对体验要求高，特别是移动应用 | 需要对搜索引擎友好的网站 |
| 开发难度 | 较高，需要专门的框架来降低这种模式的开发难度 | 较低，框架选择容易 |
如何解决
Nuxt.js 是一个基于Vue.js的通用应用框架，预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。可以将html在服务端渲染，合成完整的html文件再输出到浏览器。简而言之就是将本来要放在浏览器执行创建的组件，放到服务端先创建好，然后生成对应的html将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
期待
Nuxt.js会开设[Nuxt.js从出师到挂帅]专题进行讲解，敬请期待！！！
