Astro Islands 架构设计：静态速度 + 动态交互

TL;DR

Astro Islands = 静态 HTML（默认）+ 动态组件（按需激活）。JS 负载减少 70-90%。

传统 SPA 的问题

React/Vue SPA：加载整个页面 JS → 客户端渲染 → 可交互。问题：JS 负载大、首屏慢、SEO 不友好。

Astro 的做法

页面 = 静态 HTML（海洋）+ 交互组件（岛屿）。

<!-- Counter 组件已移除 -->
<DateDisplay client:visible /> <!-- 进入视口才激活 -->

不写 client:* = 纯静态 HTML，0 JS。

client:* 指令

指令	含义	使用场景
client:load	立即激活	首屏关键交互
client:idle	空闲时激活	非关键交互
client:visible	进入视口才激活	长页面底部组件
client:media	满足媒体查询才激活	移动端专用
client:only	只在客户端渲染	依赖浏览器 API

性能数据

指标	传统 SPA	Astro Islands
JS 负载	150KB	15KB
首屏可交互时间	2.5s	0.8s

岛屿架构局限

1. 组件之间无法直接共享状态
2. client:load 太多就失去意义
3. 调试比单 bundle 复杂

写在

核心思想：默认静态，按需交互。大部分博客不需要 JS，就不要加载 JS。

延伸阅读

• Astro Islands 文档
• Astro SSG vs SSR 深度解析