使用 Astro 构建高性能内容驱动型网站

解决现代网页加载过重的问题：通过 Astro 的“群岛架构”实现默认零 JS 发送到浏览器，仅在需要交互的组件上进行按需激活，极大地提升首屏加载速度和 SEO 表现。

为什么需要这个技能

传统的 React 或 Vue 框架即使在渲染静态页面时，也会向浏览器发送大量的 JavaScript 运行时，导致页面加载缓慢（尤其是低端设备）。

Astro 引入了群岛架构（Islands Architecture）。它在构建时将页面转换为纯 HTML，只有当你明确指定某个组件需要交互（如搜索框、购物车）时，它才会将该组件作为独立的“岛屿”进行客户端激活（Hydration）。这意味着你可以在同一个项目中使用 React、Vue、Svelte 等多种框架，而无需承担整体性能下降的代价。

适用场景

• 构建内容密集型网站：如个人博客、技术文档、企业官网、作品集。
• 对 Core Web Vitals（核心网页指标）有极高要求的性能优化场景。
• 需要大量处理 Markdown 或 MDX 文件的内容站点。
• 希望在一个项目中混合使用多种 UI 框架（如 React + Svelte）。

核心工作流

1. 项目初始化与集成

使用脚手架创建项目并安装必要的插件（如 Tailwind 或 React）：

npm create astro@latest my-site
cd my-site
npx astro add tailwind react mdx

2. 编写 .astro 组件

.astro 文件由顶部的服务器端代码栅栏（Server-only）和底部的 HTML 模板组成：

---
// 此部分仅在服务器运行，绝不会发送到浏览器
interface Props {
  title: string;
}
const { title } = Astro.props;
---

<h1>{title}</h1>
<style>
  h1 { color: red; } /* 自动作用域隔离 */
</style>

3. 实现选择性激活（Islands）

通过 client: 指令控制组件何时在浏览器端加载 JS：

---
import Counter from '../components/Counter.tsx';
---

<!-- 仅渲染为静态 HTML，无 JS -->
<Counter />

<!-- 页面加载后立即激活 -->
<Counter client:load />

<!-- 滚动到可见区域时才激活（推荐用于提升性能） -->
<Counter client:visible />

4. 内容集合（Content Collections）

利用 src/content/config.ts 为 Markdown 内容定义类型安全的 Schema，确保内容在构建阶段即可通过 Zod 验证。

下载和安装

下载 astro 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐