Astro 与 React 群岛配置

使用 npx create astro@latest 初始化 Astro 项目时，该命令会运行一个交互式向导，用于选择模板、TypeScript 设置和包管理器。Astro 支持多个起始模板，包括空白模板、博客模板和文档模板。

Astro 集成会为项目添加框架支持。运行 npx astro add react 会自动安装 @astrojs/react、react 和 react-dom，并更新 astro.config.mjs 以包含 React 集成。整个设置过程只需一条命令。

.astro 文件是 Astro 的组件格式。它由前置元数据部分（位于 --- 分隔线之间的 JavaScript）和模板部分组成。默认情况下，Astro 文件会输出静态 HTML；除非您明确添加客户端指令，否则不会向浏览器发送 JavaScript。

将 React 组件导入 Astro 文件时，可以使用标准的 ES 模块语法：import Counter from './Counter.jsx'。如果没有客户端指令，Astro 会将 React 组件在服务器端渲染为静态 HTML，并将这些 HTML 发送到浏览器，因此不会为该组件发送任何 JavaScript。

在 Astro 模板的组件标签中添加 client:visible，即可将其转换为岛屿：<Counter client:visible />。此时，Astro 会发送 Counter 组件的 JavaScript，在组件滚动进入视口时对其进行水合，并使其具备交互性。如果没有该指令，它就只是静态 HTML。

作为 Astro 岛屿使用的 React 组件采用标准 React 编写，可以使用钩子、状态、副作用以及任何 React 库。React 组件本身不包含 Astro 专属接口。岛屿边界由 Astro 模板定义，而不是由组件代码定义。

每个岛屿实例都是一棵独立的 React 树。同一页面上的两个 Counter 岛屿不会共享状态。如果需要共享状态，有三个选择：将它们合并为一个岛屿，使用网址查询参数保存可序列化的状态，或者使用 nanostores 之类的共享状态库。

@nanostores/react 库提供了轻量级原子状态，任何岛屿都可以订阅这些状态。一个岛屿向纳米存储原子写入数据，另一个岛屿读取这些数据。由于纳米存储与框架无关，因此同一页面上的 React 岛屿和 Vue 岛屿之间也可以使用这种模式。

Astro 内容集合提供了一种类型安全的方式来管理 Markdown 和 MDX 文件。使用 Zod 定义集合模式，将 Markdown 文件放入 src/content/，然后 Astro 会生成类型完整的查询函数。这是管理博客文章、文档和产品页面的标准模式。

运行 astro build 会生成一个包含静态 HTML 文件的 dist/ 文件夹。对于每个页面，Astro 都会输出一个 HTML 文件，其中包含服务器端渲染的内容，以及该页面上的岛屿所需的 JavaScript 捆绑包。没有岛屿的页面不会输出任何 JavaScript。

静态输出可以部署到任何 CDN（Netlify、Vercel、Cloudflare Pages），无需服务器。如果需要服务器端渲染（动态路由、接口端点），Astro 支持用于 Node.js、Vercel Edge、Cloudflare Workers 和 Deno 的 SSR 适配器。无论采用哪种模式，岛屿的工作方式都完全相同。

要让导入的 React 组件在客户端具备交互性，必须对 Astro 模板中的该组件进行什么最小修改？

使用 npx astro add react 配置带有 React 的 Astro。Astro 文件默认是静态的；在 React 组件标签中添加 client: 指令，就会将其转换为经过水合的岛屿。React 组件就是标准 React 组件，不包含 Astro 专属接口。每个岛屿的状态彼此隔离；nanostores 可以实现跨岛屿通信。构建结果是静态 HTML，并且只包含所需的岛屿 JavaScript。