🚀 什么是 Astro？

Astro 是一个现代化的 Web 框架，专为内容驱动的网站设计。它采用创新的 Islands 架构，默认零 JavaScript，只在需要时加载交互组件。

🎯 核心理念

  • HTML 优先：HTML 是最快的 UI 框架
  • 零 JS 默认：默认不发送 JavaScript
  • Islands 架构：选择性水合交互组件
  • 多框架支持：React、Vue、Svelte 混用
  • 服务端优先：渲染在服务端完成

📊 项目信息

⭐

GitHub Stars

48K+ 开发者关注

🏆

State of JS 2024

#1 兴趣/留存/积极性

⚡

性能提升

比其他框架快 40%

📦

JavaScript

减少 90% JS 体积

🏝️ Islands 架构

Astro 开创的 Islands 架构，将页面分为静态 HTML 和交互式"岛屿"：

astro
---
import ReactCarousel from '../components/Carousel.jsx';
---

<!-- 静态 HTML，零 JS -->
<header>
  <h1>我的网站</h1>
  <p>这段内容是纯 HTML，没有 JavaScript</p>
</header>

<!-- 交互式岛屿，只在这里加载 JS -->
<ReactCarousel client:visible />

<!-- 更多静态内容 -->
<footer>
  <p>© 2024 我的网站</p>
</footer>

🔄 多框架支持

可以在同一个 Astro 项目中混用多个 UI 框架：

⚛️

React

@astrojs/react

💚

Vue

@astrojs/vue

🔥

Svelte

@astrojs/svelte

⚡

Preact

@astrojs/preact

⚡ 性能对比

指标AstroNext.jsGatsby
首次加载 JS0KB~80KB~120KB
Lighthouse 分数98-10080-9575-90
TTFB极快快中等

🚀 快速体验

bash 
# 创建新项目
npm create astro@latest

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

📖 更多文档