Web开发架构演变
前端技术经历了从基础的HTML、CSS和JavaScript到现代前端框架的演变，Web开发架构也在不断进化。本文将探讨多页面应用（MPA）、单页面应用（SPA）和逐步增强的单页面应用（PESPA）这三种架构的特点和差异。
MPA (Multi-Page Apps) 多页面应用程序
在Web开发的早期，内容的切换主要通过跳转不同的HTML页面实现，这种被视为“传统”的开发架构依赖服务器生成和刷新页面。MPA的优点在于其返回的内容直接呈现在HTML中，对搜索引擎优化（SEO）友好，并且由于内容由服务器直接传回，首屏渲染速度较快。然而，MPA的缺点在于其过度依赖服务器生成页面，且每次导航到新页面时，浏览器都必须从头开始加载内容，这可能会影响用户体验。
SPA (Single Page Apps) 单页应用
随着AngularJS和Ember等框架的出现，SPA在2010年代初开始流行。随着功能强大设备的普及，我们能够将过去在服务器上运行的大部分逻辑转移到客户端。当页面需要不同的内容时，客户端会通过JavaScript API更新主体内容，这样可以提供流畅的导航，避免不必要的页面刷新，从而提供更好的用户体验。然而，SPA也有其缺点，由于内容通过JavaScript刷新，搜索引擎爬虫可能无法爬取到关键内容，对SEO不友好。此外，由于SPA通常一次性加载大量JavaScript，首屏渲染速度可能较慢，页面优化也可能成为问题。
PESPA (Progressively Enhanced Single Page Apps) 渐进式增强的单页应用程序
PESPA是一种新的前端架构，它试图结合MPA和SPA的优点。PESPA的初始HTML和数据都是从服务器获取的，但它会对这些内容进行处理，将不需要交互的页面部分先传递给前端，将需要交互的部分“冻结”，在需要时再加载。当用户进行路由切换时，PESPA会通过JavaScript更改页面内容，而不会重新加载新的页面。这种方式可以提高首屏渲染速度，优化导航体验，同时对SEO也更友好。
可能会有疑问，这样的架构还算SPA吗？通过服务端渲染，并且构建出来的产物是多个HTML，这不是MPA吗？实际上，从用户体验的角度看，这与SPA提供的体验是一致的，用户在网站上浏览并进行路由切换，并不会引起浏览器对整个页面进行加载。在技术上，PESPA是SPA（通过JavaScript修改页面内容）和MPA（服务端处理数据和生成HTML）的技术相结合。
参考资源
本文参考以下两篇文章，也是因为看了这两篇文章才写的这篇blog,基本就是下面两篇blog的总结，有兴趣的朋友可以看一下，讲的挺好的。