Astro 岛屿架构

岛屿是什么

Astro 页面默认是纯静态 HTML，不发任何 JS。

当你需要某个区域「可交互」时，就给那个组件加上一个客户端指令，它就会变成一个独立的「岛屿」：周围是静态海洋，只有这个小岛加载自己的 JS。

这正是 Astro 又快又灵活的原因。

客户端指令

给交互组件加上以 client: 开头的指令，控制它何时加载并在浏览器里激活。

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

常用指令：

• client:load：页面一加载就激活，适合首屏就要交互的组件。
• client:idle：浏览器空闲时再激活，不抢占主流程。
• client:visible：组件进入视口才激活，适合页脚、评论区等。
• client:media：满足某个媒体查询才激活，例如 client:media="(max-width: 768px)"。
• client:only：跳过 Astro 端渲染，完全由客户端框架接管（需指定框架，如 client:only="react"）。

一个交互计数器示例

假设用 React 写了个计数器，在 Astro 页面里这样用：

---
import Counter from '../components/Counter.jsx';
---
  <Counter client:visible start={0} /> <!-- start={0} 是传给 Counter 组件的初始值 -->

只有它滚进视口，才会下载 React 运行时并让按钮可以点击。

为什么这样做更快

传统 SPA 会把整个页面的 JS 都发到浏览器，哪怕大部分区域只是展示文字。

Astro 只给「真正需要交互」的组件发 JS，首屏 JS 体积通常小很多，加载自然更快。

不同框架的岛屿并存

你可以在同一页面混用 React、Vue、Svelte 的岛屿，各自独立工作。

这对渐进迁移老项目特别有用：先「水合」（hydrate，即把静态 HTML 变成可交互的客户端组件）一个新组件，其余保持静态。