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

Astro 的岛屿架构（Islands Architecture）是一种创新的 Web 开发模式，它解决了传统单页应用（SPA）的性能问题。

核心概念：

岛屿架构将页面视为静态 HTML 的海洋，其中散布着交互式的 JavaScript"岛屿"。默认情况下，Astro 组件是静态的，只输出 HTML。只有当你明确使用 client:* 指令时，组件才会变成交互式的岛屿。

client 指令类型：

client:load：页面加载时立即水合组件
```
astro
<InteractiveComponent client:load />
```
client:idle：浏览器空闲时水合组件（推荐用于非关键交互）
```
astro
<InteractiveComponent client:idle />
```
client:visible：组件进入视口时才水合（适合滚动加载）
```
astro
<LazyComponent client:visible />
```

client:media：匹配特定媒体查询时才水合

astro
<ResponsiveComponent client:media="(max-width: 768px)" />

client:only：只在客户端渲染，不进行服务端渲染
```
astro
<ClientOnlyComponent client:only="react" />
```

性能优势：

减少 JavaScript 包体积：只有交互式组件的 JavaScript 才会被发送到浏览器
更快的首次内容绘制（FCP）：静态 HTML 可以立即显示
更好的 SEO：搜索引擎可以直接索引静态内容
渐进式增强：核心内容立即可用，交互功能按需加载

实际应用示例：

astro
---
import Header from '../components/Header.astro';
import BlogPost from '../components/BlogPost.astro';
import CommentSection from '../components/CommentSection.jsx';
import NewsletterForm from '../components/NewsletterForm.svelte';
---

<Header />
<main>
  <BlogPost />
  <CommentSection client:visible />
  <NewsletterForm client:idle />
</main>

在这个例子中：

Header 和 BlogPost 是静态的（无 JavaScript）
CommentSection 在滚动到视口时才加载 JavaScript
NewsletterForm 在浏览器空闲时才加载

与传统 SPA 的对比：

传统 SPA 需要下载整个应用的 JavaScript 并进行水合，而岛屿架构只下载和执行必要的交互部分。这使得 Astro 网站通常比同等的 SPA 快 2-3 倍。

最佳实践：

默认不使用 client:* 指令
只为真正需要交互的组件添加 client:*
根据交互的紧急程度选择合适的指令
使用 client:visible 处理滚动加载的组件
使用 client:idle 处理非关键交互功能

岛屿架构让开发者能够构建既快速又具有丰富交互体验的网站。