Features
- Islands architecture for partial hydration
- Zero JavaScript by default
- Use any UI framework (React, Vue, Svelte, Solid)
- Content Collections with type-safe markdown
- View Transitions API integration
Pros
- Best performance for content-heavy sites
- Framework-agnostic — use React, Vue, Svelte in same project
- Excellent developer experience with content collections
- Ships zero JS unless you explicitly opt in
Cons
- Not ideal for highly interactive SPA-style applications
- Islands architecture requires rethinking component design
- Server-side interactivity requires explicit client directives
Overview
Astro is a web framework designed for building content-driven websites like blogs, marketing sites, documentation, and e-commerce. Its defining feature is the islands architecture — a pattern where most of the page is static HTML, and only interactive components (“islands”) are hydrated with JavaScript on the client.
By default, Astro ships zero JavaScript to the browser. Interactive components are opt-in using client directives like client:load, client:visible, or client:idle. This approach delivers exceptional performance while still allowing you to use your favorite UI framework — React, Vue, Svelte, Solid, or any combination — for interactive parts.
When to Use
Astro is the right choice for content-heavy websites where performance matters: blogs, documentation sites, marketing pages, portfolios, and e-commerce storefronts. It’s ideal when most of your pages are content with only isolated pockets of interactivity.
Getting Started
npm create astro@latest my-site
cd my-site && npm run dev---
// src/pages/index.astro
import Counter from "../components/Counter.tsx";
---
<html>
<body>
<h1>Hello, Astro!</h1>
<Counter client:visible />
</body>
</html>