Astro Islands 架构详解：零 JS 的静态站点是怎么生成的

Islands Architecture 是什么

Astro Islands（孤岛架构）的核心理念很简单：

页面上大部分内容是静态 HTML，只有少数”孤岛”需要 JavaScript。

传统 SPA 框架（React/Vue）会把整页变成一个 JS 应用。Astro 反其道而行——默认输出零 JS 的纯 HTML，只在需要交互的地方”注水”。

一个例子

---
// 这个组件在服务端渲染，不产生 JS
import StaticHeader from '../components/Header.astro';
import InteractiveSearch from '../components/Search.svelte';
---
<html>
  <body>
    <StaticHeader />  <!-- 纯 HTML，零 JS -->
    <InteractiveSearch client:load />  <!-- 客户端水合 -->
  </body>
</html>

水合指令

Astro 提供 5 种 client:* 指令控制水合时机：

指令	行为
`client:load`	页面加载后立即水合
`client:idle`	浏览器空闲时水合
`client:visible`	元素进入视口时水合
`client:media`	匹配媒体查询时水合
`client:only`	跳过 SSR，纯客户端渲染

性能收益

以一个典型的博客首页为例：

React SPA：~120KB JS bundle
Astro Islands：~5KB JS（仅搜索组件需要）

差距是 24 倍。这对 SEO 和 Core Web Vitals 有巨大影响。

什么适合做 Island

✅ 搜索框、筛选器
✅ 评论区
✅ 交互式图表
✅ 暗色模式切换
❌ 纯展示的内容（用 .astro 组件）
❌ SEO 关键内容（用服务端渲染）

与 Next.js RSC 对比

Next.js 的 React Server Components 是另一种”零 JS”方案，但 Astro 更彻底——它不依赖于特定框架，.astro 组件本身就是服务端模板，不产生任何运行时。

理解 Islands 架构，是真正掌握 Astro 的关键。

登录 / 注册