SuperAPI AI 工具集

astro-islands

通用与其它

查看项目

更新于 10-15 21:49

技能介绍

用途:面向 Astro 项目的 Islands 架构实践,帮助在页面中按需加入 React、Vue、Svelte、Solid 等交互组件,并延迟动态服务端内容,避免阻塞首屏渲染。

主要能力:默认零 JS,仅交互组件才发送 JS;通过客户端指令控制水合时机——client:load 页面加载即执行,适合关键交互 UI;client:idle 在 requestIdleCallback 后加载,适合非关键 UI;client:visible 进入视口时加载,适合首屏以下组件;client:media="(query)" 在媒体查询匹配时加载,适合响应式组件;client:only="framework" 仅客户端渲染、不做 SSR,适合依赖 localStorage、window、canvas 等浏览器 API 的组件。Server Islands 使用 server:defer 在页面加载后于服务端渲染组件,配合 slot="fallback" 提供占位内容,适合个性化或需鉴权的内容,且不阻塞初始渲染,但需要服务端适配器。transition:persist 可在 View Transitions 期间保留组件状态,如媒体播放器或表单。

使用方式:资料要求实现前先用 TeamCreate 启动 3 个 agent,分别用 fuse-ai-pilot:explore-codebase 分析现有组件与水合模式、fuse-ai-pilot:research-expert 通过 Context7/Exa 核对最新 Islands 文档、mcp__context7__query-docs 获取客户端指令与 server:defer 示例;实现后运行 fuse-ai-pilot:sniper 验证。

适用场景:为 Astro 页面添加交互组件、延迟动态服务端内容、在视图过渡中保持状态、用懒水合优化可交互时间。

限制:server:defer 需要服务端适配器;client:only 不做 SSR;具体配置与版本要求资料未提供。