Astro 简介

什么是 Astro？

Astro 是一个全新的静态网站构建工具，它采用了一种创新的方法来构建更快、更优化的网站。

核心特性

零 JavaScript

Astro 默认输出零 JavaScript，只在需要的时候才加载 JavaScript。这意味着你的网站加载速度极快。

组件岛架构

Astro 引入了”组件岛”（Component Islands）的概念，允许你在静态页面中嵌入交互式组件。

---
// 在 Astro 中使用 React 组件
import MyReactComponent from './MyReactComponent.jsx';
---

<div>
  <h1>静态内容</h1>
  <MyReactComponent client:load />
</div>

框架无关

Astro 支持多种前端框架：

• React
• Vue
• Svelte
• Solid
• Preact

你甚至可以在同一个项目中混用不同的框架！

性能优势

优化的构建输出

Astro 生成的 HTML 是完全静态的，不包含任何运行时框架代码。

自动优化

• 自动代码分割
• 自动图片优化
• 自动 CSS 提取和优化

快速加载

由于输出的是纯静态 HTML，网站的加载速度极快，SEO 友好。

内容集合

Astro 的内容集合（Content Collections）功能让管理 Markdown 内容变得简单：

import { defineCollection, z } from 'astro:content';

const posts = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
  }),
});

export const collections = { posts };

为什么选择 Astro？

1. 性能优先 - 默认零 JavaScript，极致的加载速度
2. 开发体验 - 熟悉的语法，强大的工具链
3. 灵活性 - 支持多种框架，按需选择
4. 现代化 - TypeScript、HMR、静态类型检查

适用场景

Astro 特别适合：

• 博客和内容网站
• 文档网站
• 营销网站
• 作品集网站

开始学习

访问 Astro 官方文档 了解更多。

Astro，构建更快的网站！⚡