🏝️ 什么是 Island？

Island 是页面上一个独立的交互式 UI 组件，周围是静态 HTML。只有 Island 需要加载 JavaScript。

🎯 架构优势

  • 静态内容零 JS，加载极快
  • 交互组件独立水合
  • 并行加载，互不阻塞
  • 按优先级控制加载时机

📋 Client 指令

client:load

页面加载时立即水合，适用于关键交互组件：

astro
<Header client:load />

client:idle

浏览器空闲时水合，适用于低优先级组件：

astro
<Analytics client:idle />

client:visible

进入视口时水合，适用于折叠区域：

astro
<ImageCarousel client:visible />

client:media

匹配媒体查询时水合：

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

client:only

跳过服务端渲染，纯客户端渲染：

astro
<Chart client:only="react" />

📊 性能对比

场景传统 SPAAstro Islands
博客首页加载完整 React0KB JS
带轮播图加载完整 React仅轮播组件 JS
电商详情页加载完整 Vue仅购物车/评论 JS

🚀 最佳实践

  • 静态内容不用 client 指令
  • 关键交互用 client:load
  • 折叠内容用 client:visible
  • 分析追踪用 client:idle
  • 依赖浏览器 API 用 client:only