理解Astro的孤岛架构

Astro 的核心理念是 默认发送零 JavaScript。页面在构建时被渲染成静态 HTML， 只有你显式标记为「孤岛」的组件才会在浏览器里被激活（hydrate）。

client 指令

在 Astro 中引入一个 React 组件时，你可以用 client:* 指令控制它何时加载：

• client:load —— 页面加载后立即激活
• client:idle —— 浏览器空闲时激活
• client:visible —— 组件进入视口时才激活

<ThemeToggle client:load />
<HeavyChart client:visible />

为什么比纯 Next.js 更省

在传统 SPA 里，整棵组件树都要在客户端重新执行一遍。而在 Astro 里， 静态内容就是静态内容，交互只发生在孤岛内部——这让首屏 JS 体积可以趋近于零。

这正是这个博客选择 Astro 的原因：内容型站点，性能优先。