前端框架：从状态更新到服务端交付
框架解决的核心问题，是在界面不断变化时保持状态、DOM 和副作用之间的关系清楚。全栈框架又向前一步，把路由、服务端读取、缓存、表单命令和部署环境纳入同一应用。它们减少了大量手工协调，但 HTML 语义、JavaScript 时序、HTTP 权限和浏览器资源加载仍然存在。
这一部分使用同一个项目工作台来观察八种技术。比较对象不是模板语法，而是一次用户操作怎样经过状态更新、服务端读取、缓存和发布资源，最后得到可恢复的界面。
开始前需要具备什么
读者应完成 Web 基础，能用 TypeScript 描述组件输入、局部状态和服务端数据，并理解 URL、表单、异步取消与运行时验证。
先分清两类问题
React、Vue、Angular 和 Svelte 主要回答客户端更新问题：状态由谁拥有，派生值何时重算，框架怎样安排渲染，DOM 何时提交，副作用又在何时建立和清理。
Next.js、Nuxt、SvelteKit 和 Astro 还要回答服务端交付问题：首个 HTML 在哪里生成，数据在哪一侧读取和验证，浏览器怎样接管已有页面，缓存如何区分用户与输入，表单写入怎样重新授权，以及应用最终运行在哪个平台。
两类问题相互连接。服务端输出与客户端初值不同会造成水合错误；缓存忽略身份可能泄露数据；组件状态没有清理会让切换用户后仍显示旧内容；部署删除旧资源会让已打开页面在下一次导航时失败。
八篇文章的阅读顺序
| 文章 | 主要模型 | 阅读时抓住什么 |
|---|---|---|
| React | render/commit、Fiber、并发调度与 Effects | 快照状态、更新优先级、Effect 生命周期和服务端组件边界 |
| Vue | Proxy 依赖追踪、SFC 编译与调度 | ref/reactive、派生值、watcher、key 和 DOM 更新时机 |
| Angular | 模板、依赖注入、Signals/RxJS 与表单 | 注入范围、响应来源、异步流和 SSR/hydration |
| Svelte | 编译期更新、Runes 与组件生命周期 | $state/$derived/$effect、列表身份和编译产物 |
| Next.js | App Router、RSC、流式输出与服务器命令 | server/client 边界、缓存、Server Functions 和资源版本 |
| Nuxt | AsyncData payload、Nitro 与 Route Rules | 服务端数据复用、混合渲染、缓存范围和模块边界 |
| SvelteKit | 路由 load、Form Actions、失效与 Adapter | 页面数据、增强表单、hooks 和目标运行环境 |
| Astro | 静态优先、Islands、内容集合与 Actions | 哪些区域不需要 JavaScript，动态能力怎样保持最小 |
第一次阅读可以先完成四个客户端框架，再进入四个全栈框架。若你正在处理 SSR、内容站或服务端表单，也可以先选一个全栈框架，再回到它依赖的更新模型补足客户端细节。
横向比较 用业务、团队和部署约束比较候选；阶段总结 把状态、请求、缓存、资源和恢复路径重新接起来。
贯穿练习：项目工作台
八种技术面对同一组任务。用户从深链接进入项目页，看到按权限提供的概要；随后筛选列表、编辑名称或说明并提交；另一位用户可能同时修改；当前会话可能过期；网络可能变慢；新版本发布后，旧标签仍可能继续导航。
客户端框架可以由静态站点或独立 API 提供数据，全栈框架则使用自己的路由和服务端能力。实现方式允许不同，但外部行为保持一致：
- URL 能表达当前项目、筛选和可分享状态。
- 首屏有可理解内容，不用空白页面等待所有 JavaScript。
- 用户输入不会被迟到请求或服务端重取无条件覆盖。
- 写入带操作 ID 和起始版本，服务端重新验证身份、权限和数据。
- 字段错误、权限拒绝、版本冲突、状态未知和成功确认分别呈现。
- 页面在键盘、缩放、慢网、资源失败和旧标签条件下仍有恢复方法。
示例目录位于 examples/frontend-slices/，每个子目录提供独立测试、构建和预览说明。共同浏览器行为由统一验收契约约束。
第一层：状态怎样抵达 DOM
先从一个本地筛选任务入手。输入框当前文本需要立即显示，结果列表可以由派生计算得到，昂贵工作可能需要延后，选择和详情则应有稳定身份。观察一次按键后发生了什么：哪个状态改变，哪些组件或模板重新运行，哪些 DOM 节点更新，焦点是否保持。
React 以渲染快照和提交阶段组织更新；Vue 通过响应式依赖和调度器追踪读写；Angular 结合模板、Signals、RxJS 与变更通知；Svelte 把更多依赖关系编入产物。四种模型都要求组件渲染保持可重做，副作用不能混进纯计算，列表 key 也不能用会随排序变化的索引。
第二层：副作用和异步怎样退出
网络请求、订阅、计时器、DOM API 和第三方 SDK 都有生命周期。路由或输入变化后，旧工作要取消或失效；组件卸载、组织切换和账号退出时，监听与私有缓存要清理。开发模式中的额外执行通常用于暴露清理不对称，不宜用一次性标志把问题藏起来。
为搜索任务加入慢响应和乱序返回，再快速切换路由。正确实现应让迟到结果无法写入新页面，并保留用户当前输入。测试除了最终 DOM，还要检查未处理请求、重复订阅和残留计时器。
第三层：服务端数据和客户端草稿分开
服务器确认的项目实体与用户正在编辑的草稿是两种状态。前者可以重新读取并有版本号，后者包含尚未提交的文字、选区、附件和字段错误。服务端重新验证数据时，不能直接把草稿覆盖掉；提交成功后，才用返回版本更新确认快照并让相关读取失效。
缓存同样需要写清 key、范围、寿命和失效者。公开内容、租户数据、用户私有数据和命令结果不能共用一个模糊缓存。换用某个 query 库或框架缓存函数，并不会自动补齐身份、语言、版本和权限条件。
第四层：理解 SSR、流式输出和水合
SSR 先生成浏览器可解析的 HTML，客户端随后用相同输入建立组件树并接管已有节点。时间、随机数、地区格式、权限裁剪、浏览器 API 和请求时序都可能让两侧输出不同。
流式输出可以让页面外壳和较慢区域分批到达，但代理缓冲、服务器串行请求、资源预加载和客户端水合都会影响实际效果。边界应按用户能够独立理解和重试的区域划分，不能为了展示流式能力把页面拆成大量跳动的占位块。
Astro 的 Islands 提供另一种思路：公开内容先成为完整 HTML，只给确有交互的区域发送客户端运行时。它适合内容优先页面，但多个岛之间共享状态、重复框架运行时和跨岛通信也需要明确成本。
第五层：表单写入仍是服务器命令
客户端校验负责快速反馈，服务器负责最终验证。一次写入至少包含当前身份、资源范围、输入 Schema、业务规则、起始版本和操作 ID。按钮是否禁用、组件是否隐藏都不能承担授权。
Next.js Server Functions、Nuxt/Nitro handlers、SvelteKit Actions 和 Astro Actions 提供不同入口，但都要处理重复提交、响应丢失、超时、冲突和会话变化。原生表单能工作的页面，可以在 JavaScript 失败时保留一条可靠退路；增强层再负责 pending、局部更新和焦点恢复。
第六层：构建与部署属于用户体验的一部分
框架页面最终由 HTML、服务器产物、客户端 chunk、CSS、字体、图片和运行时配置共同组成。新版本发布时应先上传完整资源，再切换引用它们的 HTML 或服务端入口；旧资源要在兼容窗口内继续可取。
目标 Adapter 或平台会改变文件系统、网络、缓存、流式输出和进程生命周期。开发服务器可用不代表目标平台可用。每篇全栈框架文章都应在真实部署环境验证深链接、客户端导航、错误页、动态资源、缓存头、日志和完整回滚。
怎样比较框架
不要把不同 demo 的代码行数或单次跑分放在一起排名。固定同一 URL、API、用户角色、数据、网络条件和任务，再比较以下事实：
- 状态所有权是否清楚，旧工作能否退出。
- 初始 HTML 和客户端资源是否符合产品需要。
- 数据读取、缓存和写入是否守住身份与版本边界。
- 错误、冲突和资源失败后，用户能否继续任务。
- 团队能否测试、诊断、升级并在规定时间内回滚。
记录浏览器 Network、首屏 HTML、关键交互的更新过程、服务端日志、缓存条件、资源清单和部署版本。框架选择的依据由这些结果组成，不由语法偏好或流行度决定。
什么算学完
完成这一部分后，你应能从一次用户操作出发，解释状态怎样更新到 DOM，读取在哪一侧发生，缓存何时失效，写入怎样确认，发布资源如何到达浏览器。还应能把 React、Vue、Angular、Svelte 与四个全栈框架的差异落到明确任务上，而不是给出脱离场景的总排名。
下一步进入 构建工具，继续追踪这些组件、路由和服务端入口如何经过解析、转换、分块和发布，最终成为浏览器与服务器实际加载的文件。