用途
本技能面向资深 Astro 前端工程师，专注于岛屿架构（Islands Architecture）、内容驱动网站与混合渲染策略。核心目标是帮助判断何时发送 JavaScript、何时保持静态，从而构建快速、以内容为中心的网站。
主要能力
- 构建内容驱动网站（博客、文档、营销站点）
- 实现岛屿架构与选择性水合
- 使用服务器岛屿（server:defer）进行延迟服务端渲染
- 使用 Content Layer API（loaders、glob、file）创建内容集合
- 通过适配器（Node、Vercel、Netlify、Cloudflare）设置 SSR
- 构建 API 端点与服务器操作
- 实现视图过渡以获得类 SPA 导航体验
- 管理服务端会话以维护用户状态
- 使用 astro:env 配置类型安全的环境变量
- 设置多语言站点的 i18n 路由
- 集成 UI 框架（React、Vue、Svelte、Solid）
- 优化图片与性能
- 配置 astro.config.mjs
- 使用 Live Loaders 构建实时数据集合
使用方式
核心工作流：分析需求（识别静态与动态内容、水合需求、数据源）→ 设计结构（规划页面、布局、组件、带加载器的内容集合）→ 实现组件（使用正确的客户端/服务端指令）→ 配置路由（基于文件的路由、动态路由、端点、i18n）→ 优化交付（配置适配器、图片优化、视图过渡、缓存）。
输出模式选择：Astro 只有两种输出模式——static（默认）和 server，没有 hybrid 模式。旧的 hybrid 行为现已成为默认：保持 static，添加适配器，并通过 export const prerender = false 让个别路由按需渲染。仅当大多数页面需要请求时数据时才使用 output: 'server'。
水合策略常见错误：在首屏 hero/header 上使用 client:visible（加载时已在视口内，会立即水合，应直接用 client:load）；在移动端使用 client:idle（低内存设备上 requestIdleCallback 可能耗时 10 秒以上）；对大型 React 组件使用 client:load（若包体超过 50KB，考虑拆分）；对导航栏/页脚进行水合（若仅需移动菜单切换，用原生 JS 脚本即可）。
服务器岛屿 vs 客户端岛屿 vs 静态：组件是否每次请求都需要服务端数据（cookies、用户会话、数据库查询、个性化）？是则用 server:defer；否则是否需要浏览器交互？是则用 client:* 指令；否则不加指令（静态 HTML，零 JS）。电商模式示例：产品页静态（标题、图片、描述）+ server:defer 处理价格/库存 + client:load 处理加入购物车按钮，一个页面三种渲染策略。
内容集合加载器选择：本地 markdown/MDX 文件用 glob() 加载器；单个 JSON/YAML 数据文件用 file() 加载器；构建时远程 API/CMS 数据用自定义异步加载器函数；需要每次请求保持新鲜的远程数据用 Live Loader（Astro 6+）。性能提示：超过 1000 条内容条目时，若不需要原始 markdown 正文，使用 glob() 并设置 retainBody: false。
Astro 6 新增稳定特性：内容安全策略（astro.config.mjs 中的 security.csp 自动为脚本/样式生成哈希）、Fonts API（内置字体优化，无布局偏移）、Live Content Collections（通过 src/live.config.ts 中的 defineLiveCollection 在内容层进行请求时内容获取）。Astro 6 要求 Node 22+（放弃 Node 18 和 20），并通过 astro/zod 捆绑 Zod 4（astro:schema 和来自 astro:content 的 z 已弃用）。
适用场景
适用于内容密集型网站，带有交互岛屿。当应用是带客户端路由和大量状态的完整 SPA、实时协作功能为核心、每个页面都在认证之后且无公开内容、或需要 React Server Components 时，应考虑其他框架（Next.js、SvelteKit、Remix 等）。
限制
资料未提供该技能的收费、价格、平台限制等具体信息。