多页应用（MPA）
我们很早之前用的 jQuery 时代，就是多页应用。
多页应用（MPA，Multi-Page Application） 是一种传统的 Web 应用架构方式，其中每次用户与应用交互时，都会加载一个新的 HTML 页面。每个页面都有自己的 URL，且通常会重新加载整个页面（包括 HTML、CSS、JavaScript 和图像等资源）。这与 单页应用（SPA，Single-Page Application） 相对，后者通过 AJAX 或其他技术动态加载内容，而无需重新加载页面。
MPA 的特点
多个页面： MPA 由多个独立的页面组成，每个页面都对应一个 URL。当用户访问不同的页面时，浏览器会完全重新加载相应的页面。
页面重载： 每次跳转到新页面时，浏览器会重新加载页面内容，并重新执行与该页面相关的所有 JavaScript、CSS 和资源。这样，用户每次点击链接时都会看到页面刷新。
资源独立性： 每个页面通常包含自己的 HTML、CSS 和 JavaScript 文件。这意味着不同页面之间的资源互不干扰，可以独立优化。
SEO 友好： 由于每个页面都有独立的 URL，因此可以为每个页面配置独特的元标签（如 title、description 等），有助于搜索引擎的优化（SEO）。搜索引擎能够直接抓取每个页面，提升网站在搜索结果中的可见性。
客户端与服务器通信： 在 MPA 中，前端和后端的耦合度较高。每次用户请求新页面时，都会向服务器发起请求，服务器会根据请求返回对应的页面内容。
MPA 的优缺点
优点：
更好的 SEO： 每个页面都有独立的 URL 和页面内容，搜索引擎可以更容易地爬取和索引每个页面，有助于提高搜索引擎排名。
简单的架构： 对于大型的、内容丰富的网站，MPA 可能是一个更自然的架构。每个页面都是独立的，可以轻松管理和更新，特别适合一些需要高层次信息分类的网站（如新闻网站、电商网站等）。
适合传统网站： MPA 更适合一些传统的 Web 应用，特别是当应用需求频繁变化或更新时，不需要每个用户请求都加载整个应用框架。
无需复杂的前端框架： MPA 通常不需要依赖复杂的 JavaScript 前端框架（如 React、Vue 或 Angular）。它可以使用传统的 HTML 和表单元素进行开发，适合较小的团队或技术栈较少的项目。
缺点：
较慢的页面加载速度： 每次用户请求一个新页面时，浏览器都会重新加载所有资源，包括 HTML、CSS、JavaScript 等，这会导致加载速度较慢，尤其是当页面内容较多时。
用户体验较差： 每次页面切换时，整个页面都会刷新，导致用户体验差，尤其在需要频繁跳转的场景下。与 SPA 的动态加载内容相比，MPA 的跳转体验较为原始。
较高的服务器压力： 每个用户的每次页面请求都需要服务器重新渲染页面，并返回完整的 HTML 页面，可能会加重服务器负担，特别是在高并发情况下。
缺乏流畅的交互体验： MPA 无法实现 SPA 中流畅的单页面交互效果（如路由跳转、局部更新等）。每次跳转都需要重新加载页面，不能即时显示内容，可能导致用户的等待时间更长。
MPA 的应用场景
传统的内容网站： MPA 非常适合于需要展示大量内容的站点，如新闻网站、博客、企业官网等。每个页面可能需要大量不同的内容和设计，且网站结构比较复杂，适合使用多个独立的页面。
电商平台： 电商网站中每个页面都有其独特的内容（如产品详情页、购物车、结算页等），适合采用 MPA 架构，使得每个页面可以独立优化。
企业门户： 一些大型企业的门户网站可能包括多个子站点，每个子站点都具有独立的页面，可以通过 MPA 来实现每个页面的独立性和管理。
传统企业应用： 对于一些传统的业务应用，如 CRM、ERP、财务管理系统等，MPA 可能更容易实现和管理，尤其是在复杂功能和页面结构较为复杂时。
MPA 的技术实现
MPA 通常依赖于后端渲染的方式，服务器会根据请求返回完整的 HTML 页面。常见的技术栈包括：
后端技术： Node.js、Java、Python、PHP、Ruby 等服务器端语言和框架（如 Spring、Django、Express）用于处理业务逻辑和渲染页面。
前端技术： HTML、CSS 和 JavaScript 用于构建用户界面。前端页面可以通过传统的表单、链接等方式与服务器进行交互。
模板引擎： 如 EJS、Jinja、Thymeleaf 等模板引擎，通常用于动态渲染 HTML 页面。
路由控制： 在 MPA 中，每个页面都有独立的 URL，服务器负责根据 URL 进行路由和渲染相应的页面。
与 SPA 对比
| 特性 | 多页应用（MPA） | 单页应用（SPA） |
|---|---|---|
| 页面刷新 | 每次请求都会重新加载页面 | 不会重新加载页面，数据动态更新 |
| SEO | 好，适合搜索引擎抓取 | 较差，需要额外配置（如 SSR） |
| 用户体验 | 切换页面时较慢，体验差 | 切换页面流畅，无需刷新 |
| 开发复杂度 | 较低，传统开发方式 | 较高，需要使用前端框架 |
| 适用场景 | 内容展示、传统网站 | 复杂交互、实时应用 |
总结
MPA 是一种传统的 Web 应用架构方式，适用于需要大量内容展示的场景，特别是在 SEO 和页面独立性要求较高的情况下。尽管 MPA 在用户体验上不如 SPA 流畅，但它在性能、架构和开发方面具有其独特的优势。