# Astro — Content-First Web Framework for Speed
> Web framework that ships zero JavaScript by default. Build blazing-fast content sites with any UI framework. Islands architecture for selective interactivity. Perfect for docs and blogs. 50,000+ stars.
## Install
Save in your project root:
## Quick Use
```bash
npm create astro@latest my-site
cd my-site && npm run dev
```
```astro
---
// src/pages/index.astro
const title = "My Site";
const posts = await fetch("https://api.example.com/posts").then(r => r.json());
---
{title}
{title}
{posts.map(p => {p.title}
{p.body}
)}
```
Zero JavaScript shipped to the browser. Static HTML by default.
---
## Intro
Astro is a web framework that ships zero JavaScript to the browser by default with 50,000+ GitHub stars. It renders everything to static HTML at build time, resulting in the fastest possible page loads. When you need interactivity, use Islands architecture to hydrate only specific components with React, Vue, Svelte, or any framework. Perfect for content-heavy sites like docs, blogs, marketing pages, and portfolios. Best for developers who want maximum performance for content-first websites. Works with: React, Vue, Svelte, Solid, Preact. Setup time: under 2 minutes.
---
## Key Concepts
### Zero JS by Default
```astro
Hello, World!
This is pure HTML. No framework runtime.
```
### Islands Architecture
Add interactivity only where needed:
```astro
---
import StaticHeader from "./Header.astro"; // No JS
import ReactCounter from "./Counter.jsx"; // Interactive
---
```
Hydration directives:
| Directive | When |
|-----------|------|
| `client:load` | Immediately on page load |
| `client:idle` | When browser is idle |
| `client:visible` | When component scrolls into view |
| `client:media` | When media query matches |
### Content Collections
Type-safe content management for Markdown/MDX:
```typescript
// src/content/config.ts
import { defineCollection, z } from "astro:content";
const blog = defineCollection({
schema: z.object({
title: z.string(),
date: z.date(),
tags: z.array(z.string()),
}),
});
```
```astro
---
const posts = await getCollection("blog");
---
{posts.map(post => )}
```
### Use Any Framework
Mix frameworks in one project:
```astro
---
import ReactWidget from "./Widget.jsx";
import VueChart from "./Chart.vue";
import SvelteForm from "./Form.svelte";
---
```
### Performance
| Metric | Astro | Next.js | Gatsby |
|--------|-------|---------|--------|
| JS shipped (blog) | 0KB | 80KB+ | 200KB+ |
| Lighthouse score | 100 | 85-95 | 80-90 |
| Build time (1K pages) | 8s | 25s | 45s |
### Key Stats
- 50,000+ GitHub stars
- Zero JS default
- Islands architecture
- React, Vue, Svelte, Solid support
- 100 Lighthouse score typical
### FAQ
**Q: What is Astro?**
A: A web framework that ships zero JavaScript by default, using Islands architecture for selective interactivity. Best for content-first sites.
**Q: Is Astro free?**
A: Yes, fully open-source under MIT license.
**Q: Can I use Astro with React?**
A: Yes, Astro supports React, Vue, Svelte, Solid, and Preact — even mixed in the same project.
---
## Source & Thanks
> Created by [Astro](https://github.com/withastro). Licensed under MIT.
>
> [astro](https://github.com/withastro/astro) — stars 50,000+
Thanks to the Astro team for making the web fast again.
---
## 快速使用
```bash
npm create astro@latest my-site
cd my-site && npm run dev
```
---
## 简介
Astro 是一个默认零 JavaScript 的 Web 框架，GitHub 50,000+ stars。所有内容渲染为静态 HTML，仅在需要时通过 Islands 架构注入交互性。支持 React、Vue、Svelte。适合文档、博客、营销页面等内容优先网站。
---
## 来源与感谢
> Created by [Astro](https://github.com/withastro). Licensed under MIT.
>
> [astro](https://github.com/withastro/astro) — stars 50,000+
---
Source: https://tokrepo.com/en/workflows/fd6048d5-bc34-4233-a6d2-bceb21b49ada
Author: AI Open Source