从零搭建首个 Astro 静态站点 | Tutorials

为什么选择 Astro？

现代 Web 框架往往默认向客户端打包沉重的 JavaScript 运行时，即便页面内容几乎完全是只读的。Astro 则带来了范式革新：默认输出极致纯粹的零 JS 静态 HTML 与 CSS，唯有声明了 client:* 指令的交互组件（如 React、Vue）才会被按需作为独立“群岛”注入并水合。

核心心智模型：组件群岛 (Islands)

---
import Header from "../components/Header.astro";
import InteractiveCounter from "../components/Counter.jsx";
---

<Header />
<main>
  <h1>欢迎使用 Astro</h1>
  <InteractiveCounter client:visible />
</main>

上述代码中，Header 保持为纯 HTML，而 InteractiveCounter 仅在滚动至视口时才会异步加载对应的小体积 React 脚本并完成交互水合。