替代框架概览
Svelte/Astro/Eleventy 定位；与 react/vue 分工。
25 分钟
替代框架概览
学完 React 核心 与 Vue 核心 后，你已熟悉 运行时框架：在浏览器里维护虚拟 DOM、调度更新。本 track 转向 编译型 UI 与 内容优先站点——Svelte、Astro、Eleventy 走不同路线，却在文档站、营销页、轻交互场景里很常见。
学习目标
- 说清 Svelte、Astro、Eleventy 各自解决什么问题
- 对比「运行时框架」与「编译时 / 零 JS 默认」的思路
- 明确本 track 在 /roadmaps/frontend 中的位置
三类选型速览
| 框架 | 核心思路 | 典型场景 |
|---|---|---|
| Svelte | 编译时把组件变成高效 DOM 操作 | 轻量 SPA、嵌入式 widget |
| Astro | 默认静态 HTML，按需「群岛」hydrate | 文档、博客、营销站 |
| Eleventy (11ty) | 模板 + 数据文件 → 纯静态 HTML | 极简内容站、个人站 |
它们不是 Next.js 核心 的替代品，而是 分工不同：Next 偏全栈 React 应用；本 track 偏 内容交付与包体积。
与主流栈的关系
html-css-essentials → 语义与布局基础
javascript-core → 语言与模块
react/vue-essentials → 重交互 SPA 思维
nextjs-essentials → 全栈 + SEO + RSC
svelte-astro-essentials → 编译 UI + 静态内容选型
frontend-toolchain-essentials → 构建与部署落地
本站 platform 用 Next.js；读懂 Svelte/Astro 仍能帮你在 开源文档、客户落地页、多框架共存 场景里选对工具。
编译 vs 运行时（直觉）
| React / Vue | Svelte | |
|---|---|---|
| 运行时 | 需框架 runtime 进 bundle | 编译后接近手写 DOM 更新 |
| 更新模型 | 虚拟 DOM diff | 编译器生成细粒度订阅 |
| 学习 | Hooks / 组合式 API | 更接近「带魔法」的 HTML+JS |
Astro 再进一步：页面级默认零客户端 JS，只有标记为 client 的组件才 hydrate——与 html-css-essentials 的「内容先行」高度一致。