Astro 内容驱动 Web 框架

要解决的具体问题

内容驱动型网站（博客、文档站、营销页）通常有大量静态文本和图片，实际需要交互的 UI 并不多。但用传统 SPA 方案构建这类站点时，访客往往要下载并执行整个 JavaScript bundle，首屏渲染被脚本加载阻塞，在低配设备和慢网络上表现尤其糟糕。开发者要么忍受性能损耗，要么为每个页面手写 SSR 逻辑，维护成本高。

技能如何工作

Astro 的核心思路是让内容回归 HTML。它默认输出零 JavaScript——页面加载后是纯 HTML，无需等待脚本执行即可看到完整内容。具体能力包括：

• 内容优先渲染：页面以静态 HTML 交付，浏览器解析完即可展示，首屏不再被 bundle 阻塞。
• 岛屿架构（Islands Architecture）：页面整体是静态的，只有标记为交互组件的部分（如评论框、导航菜单）才加载 JavaScript 并"水合"，其余区域完全不动。
• 多框架共存：同一个项目里可以混用 React、Vue、Svelte、Solid 组件，按团队技术栈选型，无需为了一个页面重写整个应用。
• 按需激活交互：通过 client:load、client:visible 等指令控制组件何时加载脚本，把 JavaScript 预算花在真正需要交互的局部。

适用边界与注意点

• 适合内容密集型站点：博客、文档、官网、电商详情页等以展示为主的场景收益最大。
• 不适合强交互应用：如果页面大部分区域需要频繁状态更新（如表格编辑器、多人协作画布），岛屿架构的优势会被频繁水合抵消，此时传统 SPA 更合适。
• 组件水合需要规划：交互组件的位置和激活策略直接影响性能，滥用 client:load 会退化为全页 hydration。
• 提取资料有限：当前 SKILL.md 仅覆盖框架定位与基本概念，部署、SSG/SSR 配置等细节需查阅上游文档。