替代框架概览

学完 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 的「内容先行」高度一致。

练习

• 打开 Svelte、Astro、Eleventy 首页，各用一句话概括定位
• 在路线图中找到 Svelte / Astro / 静态站相关节点
• 列出你最近见过的三个「像内容站」的 URL，猜测可能用的技术栈

小结

Svelte 减 runtime、Astro 减默认 JS、Eleventy 减框架复杂度——都是为内容与性能做 trade-off。 下一课从 Svelte 编译式组件语法入手。