Astro 的岛屿架构（Islands Architecture）是如何工作的？client 指令有哪些类型？

岛屿架构核心原理

Astro 默认输出纯静态 HTML，只有被 client:* 标记的组件才在客户端加载 JS 并水合——这些交互组件就是"岛屿"，周围是静态 HTML"海洋"。

核心思路：能静态就静态，需要交互才加载 JS。

五种 client 指令

指令	水合时机	场景
client:load	页面加载后立即水合	导航栏、首屏轮播
client:idle	浏览器空闲时（requestIdleCallback）	订阅表单
client:visible	进入视口时（IntersectionObserver）	评论区
client:media	匹配媒体查询时	移动端菜单
client:only	跳过 SSR，纯客户端渲染	依赖浏览器 API 的组件

直接加在组件上即可：<Nav client:load />，不写 client:* 则只输出 HTML，零 JS。

与 SPA 的区别

SPA 全量下载 JS 再水合，岛屿架构只下载被标记组件的 JS，各岛屿独立水合互不阻塞。Astro 页面客户端 JS 体积通常只有同等 SPA 的 5%。

指令选择思路

首屏交互用 client:load，非关键用 client:idle，滚动可见用 client:visible，响应式用 client:media，必须依赖浏览器环境才用 client:only。拿不准就不用——默认静态即最优解。

追问

Q: client:only 和 client:load 都在客户端渲染，区别是什么？ client:load 先 SSR 输出 HTML 再水合；client:only 跳过 SSR，客户端从零渲染，首屏空白闪烁，仅用于无法在 Node 运行的组件。

Q: 岛屿架构适合所有项目吗？ 不适合。适合内容驱动型网站（博客、文档、官网）。重交互应用（在线编辑器、IM）用 SPA 更合理，因为几乎所有组件都需要交互，岛屿架构优势无法发挥。