SPA单页应用就是用户第一次进入网站时下载所有必需的内容资源（html, css, js），并可动态加载资源以响应用户交互或其他事件。

对于传统的Web应用程序 MPA (Multi-Page Application)多页应用，单页应用主要有以下两点优势：

单页应用与多页应用

用户体验良好： 传统的WEB应用MPA 是由多个真实的页面构成的，页面切换跳转需要整页刷新重新加载，所以速度慢。而SPA是由一个外壳页面，多个页面片段构成，页面切换非常快，配合转场动画，用户体验非常好。适合复杂的WEB应用程序的开发：由于只有一个页面，所以页面片段之间传递数据方便；对开发人员友好，方便进行代码调试；因为采用RESTFUL API的方式与后端交互，所以可以重用后端代码。对移动端友好，通过很少的代码改动，就可以方便移植到移动端Native应用。

但是单页应用SPA相对于多页应用MPA也同样有一些劣势，接下来我们来介绍下SPA的劣势以及相应的解决方案：

对搜索引擎SEO不友好：SPA单页应用主要通过JS根据路由来动态的挂在与卸载组件（代码片段）展示给用户，所以给搜索引擎检索页面带来很大的困难。谷歌和百度虽然对SPA应用检索进行了优化，不过效果依然不是很好。

解决方案：

采用SSR服务端渲染如果是爬虫，则给爬虫经过render过的html页面，大体的思路是通过ua判断访问是否是爬虫请求，如果是爬虫的话则通过apache转发到node，再通过puppeteer处理，不是爬虫的话则走正常流程。

SEO优化

开发门槛高：开发人员需要对前端工具链与开发框架有一定的了解。

目前前端开发有三大主流框架，React, Vue, Angular，笔者推荐使用React。

前端三大框架

Why

React 社区最为活跃，拥有最多的开发者。拥有庞大的技术生态系统，对于各种问题有非常成熟的解决方案和扩展库。React具有良好的组件化设计。适合大型、业务复杂的项目开发。