一、什么是SPA
单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互。
这种方法避免了页面之间切换打断用户体验在单页面应用中，所有必要的代码（HTML、JavaScript和css）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面，页面在任何时间点都不会重新加载，也不会将控制转移到其它页面。
举个例子来讲，就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的茶。变得只有杯子里的内容，而杯子始终都是那个杯子
熟知的JS框架，例如 react，vue，angular，ember 都属于SPA---单页面应用
二、SPA 和 MPA 的区别
多页面应用MPA：在MPA中，每个页面都是一个主页面，都是独立的，需要访问另一个页面的时候，都需要重新加载html、css、js文件，公共文件则根据需求按需加载
SPA
MPA
单页应用与多页应用的区别
| 单页面应用（SPA） | 多页面应用（MPA） | |
|---|---|---|
| 组成 | 一个主页面和多个页面片段 | 多个主页面 |
| 刷新方式 | 局部刷新 | 这个页面刷新 |
| url模式 | 哈希模式 | 历史模式 |
| SEO搜索引擎优化 | 难实现，可用SSR方式改善 | 容易实现 |
| 数据传递 | 容易 | 通过url、cookie、localStorage等传递 |
| 页面切换 | 速度快，用户体验良好 | 切换加载资源，速度慢，用户体验差 |
| 维护成本 | 相对容易 | 相对复杂 |
单页面应用优缺点
优点
- 具有桌面应用的即时性、网站的可移植性和可访问性
- 用户体验好、快，内容的改变不需要重新加载整个页面
- 良好的前后端分离，分工更明确
缺点
- 不利于搜索引擎的抓取
- 首次渲染速度相对较慢
三、实现一个SPA
hash 模式
核心通过监听url中的hash来进行路由跳转
history模式
history 模式借用 HTML5 history api，api提供了丰富的 router 相关属性相关的 api
history.pushState浏览器历史纪录添加记录history.replaceState修改浏览器历史纪录中当前纪录history.popState当history发生变化时触发
四、如何给SPA做SEO优化
基于 vue 的 SPA 如何实现 SEO 的三种方法
SSP服务端渲染
将组件或页面通过服务器生成html，再返回给浏览器。
静态化
(1) 一种是通过程序将动态页面专区并保存为静态页面，这样的页面的实际存在于服务器的硬盘中
(2) 通过WEB服务器的 URL Rewrite 的方式，它的原理是通过web服务七内部模块按一定规则将外部的URL请求转换为内部的文件地址。简单来说，就是把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。
上面两种方法都达到了实现URL静态化的效果
使用 Phantomjs 针对爬虫处理
原理就是通过 Nginx 配置，判断访问来源是否为爬虫，如果是则搜索引擎的爬虫请求会转发到一个 node server，再通过 PhantomJS 来解析完整的 HTML， 返回给爬虫。