Appearance
前端架构
元信息
- 目标：站在"选哪个框架"之上一层理解前端架构——架构模式（MVC→MVP→MVVM→状态+组件）与渲染架构（CSR/SSR/SSG 等六种模式）两条线索，把握"人手动做的越来越少、框架自动做的越来越多"的演化主线
- 关键概念：MVC、MVVM、数据绑定、状态管理、CSR、SSR、SSG
- 关联阶段：cp4
- 常见误区：以为前端架构就是选框架（代码如何分层、状态放在哪、页面在哪生成才是架构问题本身）；以为 SSR 与 CSR 只能二选一（Next.js/Nuxt 等元框架可按页面混用多种渲染模式）；以为 MVC 已经过时无用（MVP/MVVM/组件化都是对它的改良与延续）
什么是前端架构？
比"用什么框架"更高一层的问题：代码如何分层、状态放在哪、页面如何渲染、项目如何组织。本篇按两条线索梳理：架构模式（代码怎么分层）与渲染架构（页面在哪生成）。
架构模式：从 MVC 到组件化
MVC（Model-View-Controller）：经典三分层——模型管数据与业务，视图管呈现，控制器接受输入并调度二者。诞生于桌面 GUI 时代，被 Backbone.js 等早期前端框架引入，用来对抗 jQuery 时代的"DOM 糊一团"。
MVP（Model-View-Presenter）：MVC 的改良。视图变"笨"（纯被动展示），所有调度逻辑上移到 Presenter，二者通过接口通信。可测试性更好，但 Presenter 容易膨胀成"上帝对象"。
MVVM（Model-View-ViewModel）：关键一步——引入 ViewModel 作为视图状态的抽象，并借数据绑定让"数据变 → 视图自动变"。Knockout、Vue 都属此谱系。开发者从"手动同步视图"中解放出来，这正是反应式编程登场的先声。
状态 + 组件架构（现代形态）：视图进一步拆解为组件树，全局状态被抽离为独立层（Vuex/Pinia、Redux 等状态管理库），UI 成为 f(state) 的纯函数式映射。架构问题从"分层"演变为"状态放在哪"——组件局部状态、跨组件共享状态、服务端缓存，各归其位。
交互版演化图（可缩放、主题切换）：前端架构演化.html
一条主线贯穿：人手动做的事越来越少，框架自动做的事越来越多——调度（MVC→MVP）、同步（MVVM）、更新粒度（虚拟DOM）逐层自动化。
渲染架构：页面在哪生成？
同一个 SPA，"生成 HTML 的时机和位置"可以有六种选择，本质是客户端渲染（CSR）与服务端渲染（SSR）之间的光谱：
| 模式 | 页面在哪生成 | 首屏速度 | SEO | 适用 |
|---|---|---|---|---|
| CSR 纯客户端 | 浏览器执行js生成 | 慢 | 差 | 后台工具类应用 |
| SSR 服务端渲染 | 服务器每次请求时生成 | 快 | 好 | 内容随请求变化 |
| SSG 静态生成 | 构建时一次性生成 | 极快 | 好 | 博客、文档站 |
| ISR 增量静态再生 | 构建时生成+按需过期重生成 | 极快 | 好 | 内容定期更新的站点 |
| 流式 SSR | 服务器分块边生成边发送 | 快（渐进） | 好 | 大页面分片就绪 |
| 岛屿架构 | 静态为主，交互组件局部水合 | 极快 | 好 | 内容站+局部交互 |
判断依据仍是单页应用里的老问题——更像内容还是更像工具；现代元框架（Next.js/Nuxt）让你可以按页面混用多种模式。
六种模式的详细图解参考 SSR 等 6 种前端渲染模式
工程化：架构的落地形态
架构模式需要工程链支撑：包管理、构建、部署、协作规范（详见第 13 周），当前正从"手工作坊"经由"工具链自动化"走向 AI 辅助的智能化开发——但分层的思想不变。
前端工程化演进之路：从手工作坊到AI驱动的智能化开发（微信分享长链接含临时参数已化简，若失效可按标题搜索）