Astro has carved out a unique position in the web framework landscape. While most frameworks ship heavy JavaScript bundles to the browser, Astro takes a different approach: it renders everything to static HTML by default and only hydrates interactive components when you tell it to.

Why Astro?

The pitch is straightforward. Most websites are primarily content — blogs, marketing pages, documentation, e-commerce catalogs. These pages don’t need a full client-side JavaScript framework running in the browser. Astro leans into this reality.

  • Zero JS by default. Pages render to pure HTML unless you opt into client-side JavaScript.
  • Bring your own framework. Use React, Vue, Svelte, Solid, or plain HTML components — or mix them.
  • Content collections. First-class Markdown/MDX support with type-safe schemas.
  • Fast builds. Vite-powered with incremental builds.

Content Collections

One of Astro’s strongest features is content collections. You define a schema for your content, and Astro validates it at build time:

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/blog" }),
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()),
  }),
});

This gives you type safety across your entire content layer. If a blog post is missing a required field, you’ll know at build time rather than discovering a broken page in production.

The Island Architecture

Astro’s “islands” model means interactive components are isolated. A React counter on your page doesn’t mean the entire page needs React. Each interactive piece hydrates independently, which leads to significantly smaller bundle sizes.

---
import Counter from '../components/Counter.jsx';
---
<h1>My Page</h1>
<p>This is static HTML. No JS needed.</p>
<Counter client:visible />

The client:visible directive tells Astro to hydrate the counter only when it scrolls into view. There’s also client:load, client:idle, and client:media for different hydration strategies.

Getting Started

The quickest way to spin up an Astro project:

npm create astro@latest

The CLI walks you through template selection, TypeScript configuration, and initial setup. From there, you’re writing .astro files — a superset of HTML with a frontmatter script section for server-side logic.

Astro won’t be the right choice for every project. If you’re building a highly interactive SPA, you’ll want something else. But for content-driven sites — which is most of the web — it’s one of the best tools available today.