Introduction to Astro

What Astro is, why it's different from other frameworks, and when you should use it.

What is Astro?

Astro is a web framework for building content-focused websites. Unlike React or Vue, which ship a JavaScript runtime to every visitor by default, Astro sends pure HTML and CSS. JavaScript is only added where you explicitly ask for it.

The result is sites that are:

Fast by default — no JavaScript framework overhead in the browser
SEO-friendly — fully rendered HTML on every request
Easy to write — .astro files look like HTML with superpowers

Astro was created in 2021 and reached v1.0 in 2022. Version 6.3 (used on this site) is the most capable release yet, with built-in server islands, content collections, middleware, and a TypeScript-first developer experience.

How Astro is different

Most frameworks work like this:

Server sends a JavaScript bundle to the browser
JavaScript runs and renders the page
User can finally see and interact with the page

Astro works like this:

Server renders HTML
Browser displays it immediately
Only interactive components load JavaScript (called “islands”)

This is called the Islands Architecture. The sea is static HTML; the islands are interactive components. You can use React, Vue, Svelte, or any other framework for your islands — Astro is UI-framework agnostic.

When to use Astro

Astro is a great fit for:

Use case	Why Astro works
Marketing sites	Static HTML, fast LCP, great SEO
Blogs & portfolios	MDX content, automatic image opt
Documentation	Content collections, sidebar nav
E-commerce storefronts	Static pages + SSR cart/auth
Community showcase sites	Like this one!

Astro is not the best choice for:

Highly interactive apps (use Next.js, SvelteKit, or Remix)
Real-time dashboards (consider SvelteKit + WebSockets)

The .astro file format

Every Astro component is a .astro file with two sections:

---
// This section runs on the SERVER only — never sent to the browser
// Great for: database queries, API calls, reading env vars

import Header from './Header.astro'

const greeting = "Hello, world!"
const posts = await fetch('/api/posts').then(r => r.json())
---

<!-- This section is the HTML template — uses the variables above -->
<Header />
<h1>{greeting}</h1>
{posts.map(post => <p>{post.title}</p>)}

The --- fences are called the frontmatter. Code there runs at build time (for static pages) or request time (for SSR pages) — never in the browser. This is what makes Astro so fast: there is no client-side data fetching waterfall.

Astro vs the competition

Feature	Astro	Next.js	SvelteKit
Default JS shipped	~0 KB	70-100 KB	10-30 KB
UI framework	Any	React only	Svelte only
MDX support	Built-in	Plugin	Plugin
Image optimization	Built-in	Built-in	Plugin
Content collections	Built-in	Manual	Manual
Server islands	Built-in	—	—

What’s next

Installation → — Create your first Astro project
Components & Props → — Learn the .astro syntax
Live Demos → — See every Astro 6.3 feature working in your browser

← All Docs