使用 Astro 构建现代静态网站

什么是 Astro？

Astro 是一个现代的静态网站生成器，它采用了一种独特的"岛屿架构"来优化性能。与传统的 SPA 框架不同，Astro 默认输出零 JavaScript 的静态 HTML。

为什么选择 Astro？

1. **极致性能** - 默认生成纯静态 HTML
2. **框架无关** - 支持 React、Vue、Svelte 等
3. **部分水合** - 只在需要时加载 JavaScript
4. **内容优先** - 专为内容驱动型网站设计

开始使用

```bash
npm create astro@latest
```

核心概念

#

岛屿架构

岛屿架构是 Astro 的核心创新。页面中的交互组件被视为"岛屿"，周围是静态 HTML 的"海洋"。

#

客户端指令

Astro 提供了多种客户端指令来控制组件的水合时机：

- `client:load` - 页面加载时立即水合
- `client:idle` - 浏览器空闲时水合
- `client:visible` - 组件进入视口时水合

总结

Astro 非常适合构建博客、文档站点和营销页面等内容优先的网站。它的性能优势和开发体验使其成为现代 Web 开发的优秀选择。