CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
Svelte 与 Astro 入门/课时/何时选用
RawBlame
课时目录12 节

Svelte 与 Astro 入门

  1. 01替代框架概览
  2. 02Svelte 基础
  3. 03SvelteKit
  4. 04Astro 入门
  5. 05Eleventy 静态站
  6. 06静态站点生成
  7. 07与 React 对比
  8. 08数据加载
  9. 09样式与组件
  10. 10部署
  11. 11何时选用
  12. 12综合练习

何时选用

内容站 vs 重交互应用。

20 分钟

何时选用

学完 Svelte、Astro、Eleventy 与 react-essentials、nextjs-essentials、vue-essentials 的对照后,选型应回到 产品形态与团队约束,而非「新框架更酷」。

学习目标

  • 用决策表回答「内容站 vs 重交互应用」
  • 识别不适合 Astro/11ty 的需求信号
  • 把本 track 节点挂回 /roadmaps/frontend

内容站 vs 重交互

信号倾向 Astro / Eleventy倾向 React / Next / SvelteKit SPA
页面 90% 阅读、少表单✅
实时协作、复杂表格编辑✅
SEO 关键、首屏要快✅ SSGSSR 也可
统一设计系统 + 50+ 交互组件岛架构✅ 全 React/Vue
作者只会 Markdown✅ 11ty / Astro需 MDX 规范
已有 Spring API,前端展示Astro 静态或 Next SSGNext 若需同一仓全栈

内容站:博客、文档、changelog、营销落地页——默认 HTML,JS 点缀。重交互:后台、编辑器、数据可视化——runtime 框架 + 状态管理更省心。

三角决策(简版)

                    需要 React 生态组件?
                           /        \
                         是          否
                        /              \
              Next.js 全栈          要 Islands?
              或 Vite+React              /    \
                                      是      否
                                     /          \
                                  Astro      要模板极简?
                                                /    \
                                              是      否
                                             /          \
                                         Eleventy    SvelteKit

html-css-essentials 与 frontend-toolchain-essentials 是 所有分支的共同前提。

团队与维护

因素建议
招聘React/Vue 岗多;Svelte 需培训成本
与 platform 同仓文档子项目 Astro,主站仍 Next
多框架遗留Astro 收编 React/Vue 组件为岛
构建时间页数上万时 SSG 变慢 → 增量或 ISR

禁止:为 landing page 单独上 Next 全栈 + 数据库,却只用静态 Markdown——过度工程。

与本站 CodeRoadMap

  • platform:Next + Java API(动态 track、登录)
  • 讲义 mirror / 离线文档:Astro + Content Collections 可行
  • 活动页 one-off:Eleventy 或 Astro 二选一

练习

  • 为你当前或假想项目填「内容 vs 交互」比例(估百分比)
  • 写三条 不会 选 Astro 的需求、三条 会 选的理由
  • 路线图 frontend 节点:标出已学 react / vue / next / 本 track

小结

内容优先选 Astro/11ty,交互优先选 React/Vue/SvelteKit;混合用群岛,别用错全栈重量。 下一课综合练习:Astro 文档页原型。

加载本节练习…
← 上一课部署下一课 →综合练习