Astro 入门

Astro 面向 内容站点：默认输出 几乎零客户端 JS 的 HTML；需要交互的组件以 群岛（Islands） 形式按需 hydrate。可嵌入 React、Vue、Svelte 组件——与只选 react-essentials 或 vue-essentials 单栈并不冲突。

学习目标

• 理解群岛架构与 client:* 指令
• 会用 .astro 页面 + MDX 写文档页
• 对照 next-mdx 理解内容渲染差异

.astro 页面

---
//  frontmatter：服务端运行，不进浏览器
const tracks = ["react", "vue", "svelte"];
---
<html lang="zh-CN">
  <body>
    <h1>前端路线图</h1>
    <ul>
      {tracks.map((t) => <li>{t}</li>)}
    </ul>
  </body>
</html>

• --- 之间：Node 侧逻辑，可 fetch、读文件
• 模板：类 JSX 但 默认不 hydrate
• 样式：<style> 默认 scoped

群岛与多框架组件

---
import Counter from '../components/Counter.jsx';
---
<Counter client:load />

指令	行为
client:load	页面加载即 hydrate
client:visible	进入视口才 hydrate
client:idle	浏览器空闲时 hydrate

原则：整页用 React 包一层 = 回到重 bundle；只给 搜索框、主题切换 等岛加 JS。

MDX 与内容集合

Astro Content Collections 用 schema 校验 frontmatter，适合课程、博客：

src/content/docs/
  intro.mdx
  sa-intro.md

渲染管线类似本站 contentMd → 服务端编译，但 Astro 在 构建时 生成静态 HTML，而非 Next RSC 运行时。与 html-css-essentials 的语义结构 + Markdown 工作流天然契合。

Astro vs Next（内容站视角）

	Astro	Next.js
默认 JS	极少	RSC + 客户端边界
多框架	官方支持	以 React 为主
动态 API	可选 SSR 路由	Route Handlers 成熟
本站 stack	可选文档子站	platform 主栈

练习

• npm create astro@latest 选 Docs 模板
• 加一个 MDX 页，内嵌一个 Svelte 或 React 计数器并设 client:visible
• 对比 build 产物大小与同等 Vite+React SPA

小结

Astro = 静态 HTML 为主 + 按需 hydrate + MDX/内容集合。 下一课 Eleventy：更极简的模板静态站。