[!info] related notes

• 所属 MOC: 前端基础 MOC
• 前置概念: 路由
• 相关概念: 浏览器导航与前端路由, 页面运行时状态, 客户端渲染（CSR）, 服务端渲染（SSR）, CSR、SSR 与 SSG

SPA vs MPA

SPA 和 MPA 的差别，不只是“一个不刷新、一个会刷新”，而是导航主导权、运行时生命周期和服务端协作边界不同。

对比维度

• 首次加载方式
• 页面切换方式
• 页面运行时是否持续存在
• URL 和历史记录如何协作
• 服务端是否直接参与页面路由

MPA 在做什么

MPA（Multi-Page Application）里，不同 URL 通常对应不同页面资源。

例如：

• /about 对应一份页面
• /products 对应另一份页面

典型特点：

• 浏览器导航主导
• 每次切换通常会请求新的 HTML
• 当前页面的 JS 运行环境往往会被销毁
• 服务端页面路由是核心入口

SPA 在做什么

SPA（Single-Page Application）通常只有一个主 HTML 壳子，后续页面切换主要由前端应用自己接管。

典型特点：

• 首次进入先加载应用壳和核心脚本
• 后续切换通常不整页刷新
• URL 会变化，但当前文档经常仍然是同一个
• 客户端路由成为页面系统骨架

最关键的差别：页面运行时是否被整体替换

在 MPA 里，整页导航后，旧页面对应的：

• JS 堆内存
• 组件状态
• DOM 树
• 临时 UI 状态

通常都会随着旧文档一起被销毁。

在 SPA 里，很多切换只是在同一份文档里更换组件或视图，因此一部分状态更容易继续保留。

见 页面运行时状态。

状态保持上的直觉差异

MPA

• 页面级隔离更强
• 整页跳转后更依赖服务端、URL 或持久化层恢复状态

SPA

• 更容易复用内存缓存、全局 store、布局状态
• 但刷新页面时，纯内存状态仍然会丢

所以 SPA 不是“状态永远不丢”，而是“在应用内导航时，更容易保住当前运行时”。

服务端协作方式不同

MPA

服务端通常直接决定某个 URL 返回哪份页面。

SPA

服务端很多时候只负责：

• 返回入口页
• 提供静态资源
• 提供 API
• 在 History 路由下做 index.html fallback

真正的页面匹配和视图组织交给客户端路由器。

SEO 和首屏只是结果，不是唯一区别

人们常用“SPA 首屏慢 / SEO 差，MPA SEO 好”来区分两者，但这只是表现层。

更底层的区别仍然是：

• 页面由谁渲染和切换
• URL 变化时谁主导后续流程
• 页面运行时是否跨导航延续

不要把 SPA / MPA 和 CSR / SSR 混成一组概念

• SPA / MPA 主要在讲“页面系统怎么导航、怎么持续运行”
• CSR / SSR / SSG 主要在讲“首屏 HTML 什么时候、由谁生成”
• 一个 SPA 常常采用 CSR，但也可以在部分路由里配合 SSR 或 SSG
• 一个 MPA 也可能包含服务端渲染页面、静态生成页面，甚至嵌入局部客户端应用

最短记忆方式

MPA 更像“浏览器和服务器主导的页面导航系统”；SPA 更像“前端应用接管后的客户端页面系统”。

Related notes

• 前端工程化MOC
• 前端基础MOC
• CSS MOC
• ECMAScript MOC