打开一个博客，浏览器却要下载几百 KB 的 JavaScript，只为了渲染一段本可以是纯 HTML 的文字——这件事本身就很荒谬。Astro 的 Islands 架构正是为了解决这个问题。
什么是 Island
在 Astro 里，页面默认是零 JS 的静态 HTML。只有你明确标记的交互组件，才会被当作一座「岛屿」单独加载和水合（hydrate）。
---import Counter from '../components/Counter.tsx';---<h1>这段标题是纯 HTML</h1><Counter client:visible />四种常用的加载指令
| 指令 | 何时加载 | 适合 |
|---|---|---|
client:load | 页面加载后立即 | 首屏必需的交互 |
client:idle | 浏览器空闲时 | 优先级较低的组件 |
client:visible | 进入视口时 | 页面下方的演示、评论 |
client:media | 满足媒体查询时 | 只在手机上出现的菜单 |
代价是什么
Islands 之间默认是隔离的，共享状态需要借助 nanostores 之类的小工具。对于重交互的应用（比如在线文档编辑器），SPA 依然是更合适的选择。
小结
内容为主的网站，用 Islands 把 JavaScript 预算花在刀刃上；交互为主的应用，再考虑整页水合。