Astro 有哪些性能优化策略？

核心策略：零 JS 默认 + 岛屿架构

Astro 默认只输出纯 HTML，不向客户端发送任何 JavaScript。交互组件通过 client:* 指令按需水合，这就是岛屿架构——页面像海洋（静态 HTML），交互区域像岛屿（ hydrated JS）。

选择水合指令的原则：首屏交互用 client:load，非关键交互用 client:idle，滚动可见才用 client:visible，响应媒体查询用 client:media。多数场景 client:visible 就够了。

图片和字体优化

用 <Image> 组件自动生成 avif/webp 多格式、多尺寸响应式图片。首屏图设 loading="eager" + priority，其余全部 loading="lazy"。

字体用 preload 预加载 woff2 文件，避免 FOIT（无样式文字闪烁）阻塞渲染。

数据获取和构建优化

多个异步数据请求用 Promise.all 并行获取，不要串行 await。利用 Astro 的内容集合类型安全地查询数据。

构建配置中设 inlineStylesheets: 'auto' 让小样式内联、大样式外链。Vite 的 manualChunks 把 vendor 代码拆分，避免单文件过大。

缓存和部署

静态资源设 Cache-Control: public, max-age=31536000, immutable，API 响应按业务设短期缓存。部署选对适配器——Vercel 用 @astrojs/vercel，Cloudflare 用 @astrojs/cloudflare，Netlify 用 @astrojs/netlify，让平台做它最擅长的事。

实战效果

同样内容的博客，Next.js 加载约 2.8s，Astro 约 0.9s。Astro 站点的 Core Web Vitals "Good" 比例达 60%，而 WordPress/Gatsby 仅 38%。

---

追问：Astro 的岛屿架构和 React Server Components 的服务端组件有什么本质区别？

岛屿架构在 HTML 层面就隔离了交互边界，非交互区域零 JS；RSC 虽然也在服务端渲染，但交互组件仍需客户端 JS bundle 整体加载，粒度更粗。简单说：Astro 岛屿 = HTML 里嵌入 JS 岛，RSC = JS 里嵌入 HTML 流。