外观
应用形态对比：SPA / MPA / SSR / SSG
是什么
「应用形态」决定页面由谁渲染、在哪渲染。这是新项目最第一个要做的决定，因为它影响：首屏速度、SEO、服务器成本、开发复杂度——而且中途很难换。
四个缩写：
- SPA（Single-Page Application，单页应用）：浏览器下载一个空 HTML + JS，页面全靠 JS 在浏览器里渲染
- MPA（Multi-Page Application，多页应用）：传统方式，每个页面都是服务器返回的完整 HTML
- SSR（Server-Side Rendering，服务端渲染）：首次访问由服务器渲染好 HTML 发过来，后续交互仍由 JS 接管（混合形态）
- SSG（Static Site Generation，静态生成）：构建时就把页面渲染成 HTML 文件，部署后直接发
各方案对比
| 维度 | SPA | MPA | SSR | SSG |
|---|---|---|---|---|
| 首屏速度 | ⭐⭐ 慢（要先下 JS） | ⭐⭐⭐⭐ 快 | ⭐⭐⭐⭐ 快 | ⭐⭐⭐⭐⭐ 最快 |
| SEO | ⭐ 差（需额外处理） | ⭐⭐⭐⭐ 好 | ⭐⭐⭐⭐ 好 | ⭐⭐⭐⭐⭐ 最好 |
| 服务器成本 | ⭐⭐⭐⭐ 低（静态托管） | ⭐⭐⭐ 每页都请求 | ⭐ 高（服务器常驻计算） | ⭐⭐⭐⭐⭐ 极低（纯静态） |
| 开发复杂度 | ⭐⭐⭐ 简单直观 | ⭐⭐⭐⭐ 简单但前后端耦合 | ⭐ 最复杂（概念多） | ⭐⭐⭐ 中等 |
| 交互体验 | ⭐⭐⭐⭐⭐ 接近原生 App | ⭐⭐ 整页刷新 | ⭐⭐⭐⭐ 好 | ⭐⭐⭐⭐ 好 |
| 典型场景 | 后台管理系统、工具类应用 | 官网老项目、简单站点 | 电商、资讯、社交_feed | 博客、文档站、官网 |
各方案一句话优劣
- SPA：开发体验最好、最像写「应用」；代价是首屏慢和 SEO 差
- MPA：简单可靠不折腾；代价是每次跳转整页刷新，交互上限低
- SSR：兼顾首屏和交互，体验最全面；代价是学习曲线和服务器成本，踩坑多
- SSG：又快又便宜又利于 SEO；代价是内容更新需要重新构建，不适合频繁变化的数据
怎么选
按顺序问自己三个问题：
- 内容需要登录后才能看吗？ 需要 → SPA（后台、工具、SaaS 类）
- 内容对搜索引擎重要吗？ 重要 → 内容更新频繁用 SSR（电商、资讯），更新少用 SSG（博客、文档、官网）
- 只是个小页面/活动页？ 是 → MPA 甚至纯静态 HTML，别过度设计
本知识库就是 SSG
VitePress 构建时把每篇 Markdown 变成静态 HTML，所以打开快、SEO 好、还能免费托管——适合内容类站点的教科书案例。
Vue 生态对应
| 形态 | Vue 方案 |
|---|---|
| SPA | Vite + Vue 3 |
| SSR / SSG | Nuxt 3（两种都支持，按路由约定切换） |
| SSG（内容站） | VitePress（本库） |
新手阶段用 Vite + Vue 3 写 SPA 就够了；等做「给别人看的」内容站时再学 Nuxt。