Astro 的孤岛架构 (Island Architecture) 代表了 Web 性能的一次巨大跃升。通过保持绝大部分 HTML 处于静态，并仅水合交互式 UI 组件，它默认实现了零 JavaScript 加载。本文将探讨不同的水合策略，以及如何使用 Zustand 连接各个交互式孤岛。
什么是孤岛架构
传统的单页应用 (SPA) 会将整个用户界面打包进一个庞大的 JavaScript 文件中。在页面加载时，浏览器必须在执行完这一整包 JS 之后，整个应用才变得可交互。
而 Astro 采取了相反的策略：
- 默认静态：页面直接编译为纯语义化的 HTML 和 CSS，剥离了所有非必要的 JavaScript。
- 交互式孤岛：你可以在静态模板中插入交互式的 React、Vue 或 Svelte 组件。
- 定向水合：通过
client:load、client:visible或client:media等指令，你可以精准控制各组件加载 JavaScript 的时机。
使用 Zustand 连接独立孤岛
由于各个“孤岛”是在静态页面中独立渲染的 React 组件，如何在它们之间共享状态成为了一个挑战。传统的 React Context 无法跨越多个孤岛工作，因为它们不共享同一个 React 根节点。
Zustand 作为一款纯 JavaScript 状态管理器，完美解决了这一难题。
定义 Store
我们在独立文件中实例化 Store，并由处于不同孤岛中的 React 组件导入：
import { create } from 'zustand';
export const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));订阅状态变化
当一个孤岛中的组件修改了状态，Zustand 的订阅机制会自动触发页面上所有其他订阅了该状态的孤岛组件重新渲染。这使我们在完全独立的 React 孤岛之间实现了极高性能的状态同步。