在现代Web开发中，用户对页面流畅度和响应速度的要求越来越高。传统的页面切换方式因频繁的全页刷新带来的白屏问题，逐渐被更高效的前端路由方案取代。下面我将把两种开发模式拆成6个生活关键字，带你了解SPA相比于传统界面的6个特点。
1️⃣ 网址 = 门牌号
• 传统MPA：每个门牌号对应一栋独立小楼（1.html、2.html…）。
<ul>
<li><a href="1.html">Page 1</a></li> <-详情页
<li><a href="2.html">Page 2</a></li> <-列表页
</ul>
• React-Router-DOM SPA：只有一个门牌号（index.html），进去后电梯（react-router-dom）带你去不同楼层。
单文件 index.html + 路由表
// src/App.jsx
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
2️⃣ 打开速度
• 传统MPA：每次敲门都重新搬建材（HTML+CSS+JS），白屏+闪屏。
浏览器每次请求完整HTML
• React-Router-DOM SPA：第一次把整栋建材一次性搬完，后面只换家具（组件），秒开。
第一次打包后只加载一次 chunk，之后仅拉 JSON 数据
// src/App.jsx
useEffect(() => {
fetch('/api/products').then(r => r.json()).then(setList);
}, []);
3️⃣ 刷新按钮
• 传统 MPA：按 F5 = 把楼推倒重盖。浏览器每次请求完整HTML
<!-- detail.html -->
<script>
const id = new URLSearchParams(location.search).get('id');
document.body.innerHTML = `Page 1 ${id}`;
</script>
• React-Router-DOM SPA：按 F5 只是给楼重新通电，装修基本不变。按 F5 仍停留在同一组件
// src/App.jsx
const { id } = useParams(); // 刷新后 id 仍在
4️⃣ 开发者体验
•传统 MPA：新增页面 = 新建一份 HTML/模板。新增 /3.html 文件
touch 3.html
• React-Router-DOM SPA：新增页面 = 写一个新组件 + 一行 <Route path="/new" element={<New />} />。
<Route path="/cart" element={<Cart />} />
5️⃣ SEO（搜索引擎）
• 传统 MPA ：蜘蛛直接进楼拍照，效果天然好。服务器直接吐出带内容的 HTML
<title>商品列表</title>
<meta name="description" content="10 款热门商品">
• React-Router-DOM SPA ：蜘蛛要先开灯（执行 JS），拍不到就黑屏；需要 SSR/预渲染补灯。
# Next.js 一键静态化
npm run build && npm run export
6️⃣ 适用场景
• 传统 MPA ：公司官网、新闻站、博客——内容为主，交互少。简单静态内容，无需复杂状态
<!-- blog.html -->
<article>{{content}}</article>
• React-Router-DOM SPA：后台系统、SaaS、在线编辑器、小程序 H5——交互多、状态复杂。富交互后台
// AdminDashboard.jsx
<Drawer>
<Routes>
<Route path="users" element={<Users />} />
<Route path="orders" element={<Orders />} />
</Routes>
</Drawer>
复制即可跑，6 组代码一一对应，差异一目了然。
一句话回顾：
传统 MPA：一栋楼一个门牌，来回拆楼搬家；
React-Router-DOM SPA：一栋楼无数房间，换房不换楼。
快速运行对比
| 指令 | 传统 MPA | React SPA |
|---|---|---|
| 本地启动 | npx serve . 直接指向 html | npm start → webpack-dev-server |
| 打包产物 | 多个 .html + 静态资源 | 一个 index.html + *.chunk.js |
| 部署 | 复制文件到 nginx | npm run build 后 dist/ 目录 |
