单页面应用（SPA）和多页面应用（MPA）区别
在我们做解决方案、架构、选择技术的时候，没有新旧技术的区别，只有合适和不合适，也许客户要求SEO友好，多页面应用比较合适，也许客户需要页面流畅，app等开发比例比较高，单页面应用比较合适，能用最快的开发效率做出客户满意的系统，才是最终的目标。
一.简介
Web应用开发是现在很多地方应用，以前的CS的客户端开发，虽然也有，不过很少有人做了。对于BS开发也慢慢的多出来很多不同的技术和样式。前后端分离、单页面应用、微服务、容器等。常有朋友问我单页面和多页面有什么区别，我刚开始没有注意过这个问题，后来慢慢开发和在网上收集了一下资料，大体明白这个问题。刚开始用的SSH(Spring+Struts2+Hibernate)框架和SSM(Spring+Struts2+mybatis)框架的时候，所有的页面跳转都通过后台渲染跳转，所有的处理和逻辑都在服务器上，服务器压力很大，这种前后端在一起的时候，基本上是多页面应用。后来出现的springMVC、springboot实现了前后端分离，单页面应用也经常会配合着一起使用，同时开发人员也可以做前端的只关心前台，做后端的只关心后台。只要前后端对接好要开发的接口json数据，基本上就不会影响两端的问题。
单页面应用（SPA），只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端，这样前端处理逻辑分担一下后端压力，前端只需要处理后台给前台的json数据就可以了。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新，大多数前后端合在一起的框架使用的是多页面
二.区别
单页面应用（SPA）
概念：只有一个html页面，所以跳转的方式是组件之间的切换，好像是通过路由进行跳转，例如vue、react
单页面的优点：
1，页面切换速度快，用户体验较好。内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小，以前后端做的事情，现在前端可以做
2，前后端分离，前台只需要关心前台，后端只需要关心后台
3，页面效果会比较炫酷（比如切换页面内容时的专场动画），整个网站相当于一个页面，通过前端控制页面跳转和效果，异步请求json数据，不需要后台来处理。
4.跳转流畅；组件化开发；组件可复用；开发便捷，前端很多的MVVM框架，更加方便的组件化前台页面
单页面缺点：
1，不利于seo, 搜索引擎优化：需要单独方案、实现较为困难、不利于SEO检索 可利用服务器端渲染(SSR)优化，我记得我之前做的博客，用的vue做的前端，整个网站部署到Nginx上了，没有特意做SEO方案优化，结果1年多，都没有被百度收录，虽然博客内容是一方面但是，大部分还是不被爬虫识别。
2，导航不可用，单页面大多数是通过前端的路由跳转，和后端没有关系，整个网站相当于一个页面，所以导航基本上不可用
3，整个网站相当于一个页面就会导致首次加载时耗时多，首屏加载过慢；seo优化不好
4，页面复杂度提高很多
适用范围：
高要求的体验度、追求界面流畅幻彩的应用，或者追求高性能的网页流畅度，以及其后台分离的项目。比如企业内部解决方案、零售业解决方案等等
单页面一般做手机app比较多，现在大多数手机app的套壳都是单页面应用。
多页面应用（MPA）
概念：有多个完整页面构成，跳转方式是页面之间的跳转，例如超链接或者后台控制返回视图之类的。
优点：
1.首屏加载快；
2.seo优化好，搜索引擎优化比较容易
3.开发效率:对于以前老程序员可能多页面更顺手，因为他们刚开始接触的都是这种多页面应用，不过用习惯了也差不多。
多页面缺点：
1.由于基本上是后台控制和渲染页面，页面切换加载缓慢，流畅度不够，用户体验比较差
2.对于后端依赖性比较强，依赖 url传参、或者cookie 、localStorage等
3.由于是前后端合在一起的，就会导致如果是纯前端开发人员来做，可能做不了 ，可能还需要后端帮忙一起调试，就会照成效率下降
适用范围：
适用于追求SEO优化比较好，比较注重搜索引擎爬虫抓取比较友好的应用，比如博客系统、cms系统、门户网站等等
以上就是我在网上收集的资料和一部分自己理解的单页面和多页面的概念，在我们做解决方案、架构、选择技术的时候，没有新旧技术的区别，只有合适和不合适，也许客户要求SEO友好，多页面应用比较合适，也许客户需要页面流畅，app等开发比例比较高，单页面应用比较合适，能用最快的开发效率做出客户满意的系统，才是最终的目标。
标签：
一个90后草根站长！13年入行。一直潜心研究技术，一边工作一边积累经验，分享一些个人后端技术（java、python、c#、php等），以及前端相关等心得。