Islands Architecture
近年来，Web 开发的复杂度持续攀升，但用户对性能的期待却从未降低。传统的 SPA 架构虽然提供了流畅的交互体验，却以牺牲首屏加载速度为代价。
Astro 的 Islands Architecture（岛屿架构）提供了一个优雅的解决方案：在静态 HTML 的海洋中，只有需要交互的部分成为”岛屿”，独立加载和水合。
核心概念
Islands Architecture 的核心思想是：
- 默认情况下，页面是纯静态 HTML
- 只有明确标记的组件会发送到客户端
- 每个交互式组件独立加载，互不影响
性能优势
通过这种架构，Astro 可以实现：
- 极快的首屏加载（几乎纯 HTML）
- 最小的 JavaScript 包体积
- 更好的 SEO 表现
- 渐进式增强的用户体验
实战应用
让我们看看如何在 Astro 中实现 Islands Architecture：
---
// pages/index.astro
import Header from '../components/Header.astro';
import Counter from '../components/Counter.jsx';
---
<html>
<Header />
<!-- 静态内容，不需要 JavaScript -->
<main>
<h1>Welcome to Astro</h1>
<!-- 交互式岛屿，只有这里会加载 JavaScript -->
<Counter client:load />
</main>
</html>客户端指令
Astro 提供了多种客户端指令来控制组件的加载时机：
client:load- 页面加载时立即加载client:idle- 浏览器空闲时加载client:visible- 组件可见时加载client:media- 媒体查询匹配时加载
最佳实践
- 优先使用静态组件 - 除非需要交互，否则使用
.astro文件 - 延迟加载交互 - 使用
client:visible或client:idle延迟非关键交互 - 最小化客户端状态 - 将尽可能多的逻辑放在构建时
- 利用部分水合 - 只水合需要交互的具体组件