Astro — Web Framework for Content-Driven Sites

Astro Architecture

Island Architecture

Traditional SPA:        Astro Islands:
┌────────────────┐    ┌────────────────┐
│ ALL JavaScript  │    │ Static HTML    │
│ (200KB+)        │    │ (0KB JS)       │
│                 │    │   ┌────────┐  │
│                 │    │   │ Island │  │
│                 │    │   │ (5KB)  │  │
│                 │    │   └────────┘  │
└────────────────┘    └────────────────┘

Only interactive components ("islands") ship JavaScript. Everything else is static HTML.

Content Collections

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const docs = defineCollection({
    schema: z.object({
        title: z.string(),
        description: z.string(),
        category: z.enum(['guides', 'api', 'tutorials']),
    }),
});

export const collections = { docs };

<!-- src/content/docs/getting-started.md -->
---
title: Getting Started
description: Quick start guide for our AI tool
category: guides
---

# Getting Started
Install with: `pip install our-tool`

Multi-Framework Support

---
import ReactChart from '../components/Chart.jsx';
import VueForm from '../components/Form.vue';
import SvelteToggle from '../components/Toggle.svelte';
---

<!-- Mix frameworks on the same page -->
<ReactChart client:visible data={chartData} />
<VueForm client:load />
<SvelteToggle client:idle />

Hydration directives:

• client:load — Hydrate immediately
• client:visible — Hydrate when scrolled into view
• client:idle — Hydrate when browser is idle
• client:media — Hydrate on media query match

Performance

• 100/100 Lighthouse score out of the box
• Zero JS by default
• Automatic image optimization
• Built-in RSS feed generation
• Sitemap generation

FAQ

Q: What is Astro? A: Astro is a web framework with 58,100+ GitHub stars that ships zero JavaScript by default using island architecture. Supports React, Vue, Svelte for interactive parts. Perfect for content sites, docs, and blogs.

Q: When should I use Astro vs Next.js? A: Use Astro for content-driven sites (docs, blogs, landing pages) where SEO and speed matter. Use Next.js for interactive web apps (dashboards, SaaS). Astro ships less JS; Next.js has better app-like features.

Q: Is Astro free? A: Yes, open-source under MIT license.