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 为主