What is Astro?

Astro is a content-first framework that renders to static HTML by default and ships zero JavaScript unless you opt in.

4 min read Level 1/5 #astro#intro#ssg

What you'll learn

Understand Astro's "static-by-default" model
Recognize what "islands" means
See when Astro is the right tool

Astro is a web framework optimized for content-driven sites — blogs, marketing sites, docs, portfolios. It renders to static HTML by default and ships zero JavaScript to the browser unless you ask for it.

The Big Idea — Islands

Most JS frameworks ship the framework itself plus your whole app to the browser. Astro flips it. The default output is HTML; only the interactive bits (“islands”) send any JavaScript.

┌───────────────────────────────────────┐
│  HTML page (static, no JS by default)  │
│  ┌─────────────┐      ┌─────────────┐ │
│  │  React      │      │  Vue        │ │
│  │  Counter    │      │  Search box │ │
│  │  (island)   │      │  (island)   │ │
│  └─────────────┘      └─────────────┘ │
└───────────────────────────────────────┘

Each island can use a different framework — React, Vue, Svelte, Solid — and only its slice of JS ships.

What Astro Is Great At

Use case	Why Astro fits
Blogs, docs sites	Markdown + MDX are first-class
Marketing sites	Static HTML = fast LCP, easy CDN deploys
Portfolios	Components + content collections
E-commerce front	Static product pages + small interactive islands
Docs	Built-in content collections, search islands

What Astro Is NOT Great At

Heavy, app-like UIs where every page is interactive — pick Next.js, Remix, or a SPA framework
Real-time interfaces (chat, dashboards) — possible, but not Astro’s strength

The Astro File

A single .astro file holds both server-side script and a template. The script (between --- fences) runs at build time. The template is the HTML it produces.

---
const title = "Hello, Astro";
const posts = await fetch("https://api.example.com/posts").then(r => r.json());
---

<html>
  <body>
    <h1>{title}</h1>
    <ul>
      {posts.map(p => <li>{p.title}</li>)}
    </ul>
  </body>
</html>

By the time the browser sees this, it’s already plain HTML. No runtime framework. No hydration unless you add an island.

Versions

This course targets Astro 6. The general model has been stable since Astro 3; specific APIs change occasionally. We’ll flag any recent changes.

Up Next

Time to set up a real Astro project — about 60 seconds.

Setting Up Astro →