Learn

Astro

Content-first web framework that ships zero JavaScript by default. Uses islands architecture to add interactivity only where needed. Server-first rendering with Vite under the hood. Current version: Astro 6.1 (shipped 2026-03-26).

Overview

  • What: All-in-one web framework for content-driven websites
  • Install: npm create astro@latest
  • Templating: .astro components (HTML superset with frontmatter code fence)
  • Rendering: Static by default, opt-in on-demand (SSR) per route
  • Bundler: Vite (built-in, zero config)
  • UI frameworks: React, Preact, Svelte, Vue, Solid, HTMX via integrations
  • Deploy: Any Node host, Cloudflare, Vercel, Netlify, Deno, Docker
  • Requires: Node.js v22.12.0+

Why Astro

Astro is purpose-built for content-heavy sites: blogs, news, marketing, docs, portfolios, e-commerce. It is not trying to be a general-purpose app framework.

Key design choices:

  • Zero JS by default - components render to static HTML unless you explicitly hydrate them
  • Islands architecture - interactive components hydrate independently, in parallel
  • Server-first - expensive rendering happens on the server, not in the visitor’s browser
  • UI-agnostic - use React, Svelte, Vue, or plain HTML; mix frameworks on the same page
  • Content collections - type-safe, schema-validated local content with Markdown/MDX/YAML/JSON
  • Fast by default - 90% less JS than equivalent React framework sites

When to use Astro (and when not to)

Good fit: news sites, blogs, docs, marketing pages, portfolios, landing pages, e-commerce storefronts, any site where content matters more than client-side interactivity.

Poor fit: highly interactive SPAs (dashboards, chat apps, collaborative editors), apps where most of the UI requires client-side state. For those, use Next.js, SvelteKit, or a dedicated SPA framework.

Contents

  • Concepts - How Astro works
    • Components - .astro syntax, frontmatter, props, slots, scoped styles
    • Islands - Client islands, server islands, hydration directives
    • Routing - File-based routing, dynamic routes, endpoints, redirects
    • Rendering - Static vs on-demand, output modes, prerender toggle
    • Content Collections - Schemas, querying, MDX, live collections
  • Quickstart - Get started
    • Setup - Create a project, dev server, TypeScript, editor setup
    • First Site - Build a content site with layouts, pages, and a collection
  • Deep Dives - Advanced patterns
  • Notes - Tips and gotchas
    • Next.js Comparison - Side-by-side feature mapping for migration
    • Gotchas - Common mistakes, breaking changes, stale assumptions

Resources

Pages in this topic

Concepts

Quickstart

Deep Dives

Notes