前端基础概念——MPA和SPA

前端基础概念——MPA和SPA

MPA（Multi-Page Application，多页面应用）

定义：MPA 是一种传统的 Web 应用架构模型。其核心特征是“服务端全量渲染”与“多文档模型”。

在该模式下，每一个独立的页面（如首页、详情页、个人中心）在服务端都对应一个完整的视图模板（如 JSP、ASP、PHP 文件）。当浏览器发起请求时，后端服务器会实时执行业务逻辑、查询数据库，并将数据动态填充到模板中，最终拼接成一个完整的 HTML 文档（包含所有的 DOM 结构、CSS 样式和 JavaScript 脚本）返回给客户端。浏览器接收到该 HTML 后，必须销毁当前页面文档，并重新加载、解析和渲染新的整个文档（此时会出现整页白屏）。每一次路由跳转都伴随着物理页面的刷新和静态资源（JS/CSS）的重新加载。

SPA（Single-Page Application，单页面应用）

前端架构基础 | 什么是 SPA？一文彻底理解单页应用本文将全面解析 SPA 的核心原理、应用场景、优缺点以及开发中的注 - 掘金

定义：SPA 是一种现代的 Web 应用架构模型。其核心特征是“客户端渲染”与“单文档模型”。

在该模式下，应用仅从服务器加载唯一的一个初始 HTML 骨架（通常是空的 <div id="app">）。首次加载时，浏览器会一并下载包含完整业务逻辑的 JavaScript 主包（如 Vue/React 框架代码）（此时会出现整页白屏）。后续的所有用户交互和 URL 路由切换，不再请求完整的 HTML 页面，而是由前端路由组件（如 Vue-Router、React-Router）在 JS 层面拦截 URL 变化，通过 AJAX 异步请求服务端 API 仅获取纯数据（通常是 JSON）。客户端 JavaScript 接收到数据后，通过 JS 虚拟 DOM 或真实 DOM 操作，动态地、局部地更新当前页面的视图结构，而自始至终保持同一个 HTML 文档载体，不触发整页刷新（不会出现整页白屏）。

因此，SPA 本质上是通过前端技术构建的一套“模拟页面跳转”的机制，它的核心包括以下几个部分：

1. 路由系统：拦截鼠标点击事件，通过浏览器的 history API 修改 URL 地址，并根据不同地址渲染不同的页面组件。Vue 使用 vue-router 。
2. 动态组件加载：根据当前路由信息动态渲染对应的页面组件，而不需要加载新的 HTML 文件。
3. 异步数据获取：通过 fetch 或 axios 等 AJAX 方式从后端 API 获取数据，动态渲染页面内容。
4. 状态管理：对于中大型项目，为了管理全局共享数据（如用户信息、购物车数据），需要使用 Vuex、Pinia、Redux 等状态管理工具。

对比

前后端分离

可以看出，MPA 是后端参与（或者说全权负责）了前端 UI 的生成工作。而 SPA 是前端自己生成自己的 UI，后端只负责喂数据，实现了前后端的完全分离。

MPA 也可以前后端分离，也是用 AJAX 来请求后端数据并更新部分网页内容。但由于 MPA 缺乏 SPA 具有的路由控制和状态管理，所以还是有多个页面的，此时就需要请求后端发来新的 HTML。即只是路由级导航仍然是整页刷新，这和 SPA 的“单文档 + 全局路由拦截”有明显区别。

同时，由于 SPA 只是依赖后端的数据，因此可以在只有前端代码的情况下，使用 Node.js 起一个 HTTP 服务（比如 Vite Dev Server）来承载这个前端页面（即将文件吐给浏览器）并进行开发，只是看到的页面没有数据罢了（可以自行 mock）。如果想要真实的数据，只需要将这个开发环境的 HTTP 服务器代理到真实的后端即可（比如 Vite proxy 配置）。

Vite 必须代理的原因是：假设前后端都运行在本机，而后端占用了8080端口，所以前端开发时使用的 Vite Dev Server 就不得不选择另外一个端口。但是后端逻辑又在8080端口，所以必须代理过去，否则就得在前端代码中写死请求？

• 端口独占性：操作系统的一个端口（如 8080）同一时间只能被一个进程绑定。Go 后端已经占用了 8080，Vite Dev Server 如果也想用 8080，会直接报错 EADDRINUSE（地址已被占用），所以它不得不退而求其次，选择 5173 或其他空闲端口。
• 浏览器的“同源”枷锁：前端页面跑在 localhost:5173，后端接口在 localhost:8080。只要端口不同，浏览器就视为“跨域”。如果没有代理，浏览器会直接拦截前端发往 8080 的请求（CORS 报错）。

性能

MPA 每次请求后端都需要返回完整的前端页面，会产生整页白屏；

SPA 只在第一次加载时下载前端代码和页面模板，会产生首页白屏。但之后的请求就不会白屏了。

SEO

MPA 由于返回的是静态页面，爬虫能抓取到完整的页面内容，SEO 友好；

SPA 由于页面数据是根据实际路由动态生成的，在不使用服务端渲染 SSR 的情况下没法抓取到完整的页面内容，SEO 不友好。