Astro emerged from a simple observation: most websites ship way more JavaScript than they need. Marketing sites, blogs, documentation—these are content-driven pages that don’t require React running on every visitor’s browser.

Astro’s answer: ship zero JavaScript by default, then add it only where interactivity actually matters.

What is Astro?

Astro is a web framework for building content-driven websites. It generates static HTML at build time, resulting in fast-loading pages with minimal client-side JavaScript.

Key characteristics:

  • Static site generation by default
  • Zero JavaScript shipped unless explicitly added
  • Component-based architecture
  • Works with React, Vue, Svelte, or plain HTML
  • Built-in Markdown and MDX support
  • File-based routing

Astro isn’t trying to replace React or Next.js for application development. It’s specifically designed for content sites where performance and SEO matter more than client-side interactivity.

The Performance Advantage

Real Numbers

A migration study comparing WordPress to Astro showed:

  • 80% reduction in data transfer (120KB to 23KB per page)
  • 46% faster Largest Contentful Paint (0.81s to 0.44s)
  • 72% less HTML
  • 60% less JavaScript
  • 90% less CSS

Core Web Vitals

  • 63% of Astro sites pass Core Web Vitals benchmarks
  • 44% of WordPress sites pass the same benchmarks

This isn’t marginal improvement—it’s a different performance tier entirely.

Why It’s Faster

Traditional frameworks (Next.js, Gatsby): Load JavaScript framework, hydrate components, then render content. Even a blank Next.js page ships 87KB of JavaScript.

Astro: Generate static HTML at build time. Ship that HTML directly to browsers. No framework to load, no hydration step, just content.

Island Architecture

Astro pioneered “islands architecture”—a pattern where interactive components exist as isolated islands in a sea of static HTML.

How it works:

  1. Page renders as static HTML
  2. Interactive components (islands) load their own JavaScript
  3. Each island hydrates independently
  4. Static content never loads unnecessary JavaScript

Example: A marketing page with a pricing calculator. The entire page is static HTML except the calculator component, which loads its JavaScript on user interaction.

Hydration directives:

<!-- Load immediately -->
<Calculator client:load />

<!-- Load when visible in viewport -->
<Calculator client:visible />

<!-- Load when browser is idle -->
<Calculator client:idle />

<!-- Load on interaction (hover, click) -->
<Calculator client:only="react" />

This granular control means you ship exactly the JavaScript needed, when it’s needed.

Framework Agnostic

Astro doesn’t force a component framework choice. Use:

  • React
  • Vue
  • Svelte
  • Solid
  • Preact
  • Lit
  • Plain HTML/CSS

Mix frameworks in the same project. A React component and a Svelte component can coexist on the same page. Each becomes an independent island.

This flexibility lets you:

  • Use familiar tools without learning new syntax
  • Migrate existing components gradually
  • Choose the best tool for each component
  • Avoid framework lock-in

Content Collections

Astro provides first-class support for content management:

Markdown and MDX: Write content in Markdown files with YAML frontmatter. MDX adds component support inside Markdown.

Type-safe schemas: Define schemas for your content using Zod. Astro validates frontmatter at build time, catching errors before deployment.

Automatic routing: File-based routing generates URLs from your content structure. /src/content/blog/my-post.md becomes /blog/my-post/.

Content queries: Query and filter content programmatically:

const posts = await getCollection('blog');
const recentPosts = posts.sort((a, b) =>
  b.data.pubDate - a.data.pubDate
).slice(0, 5);

Hosting Costs

Static sites are cheap to host because they’re just files.

Free options:

  • Netlify (100GB bandwidth/month)
  • Vercel (100GB bandwidth/month)
  • Cloudflare Pages (unlimited bandwidth)
  • GitHub Pages

Paid options (high traffic):

  • Netlify Pro: $19/month
  • Vercel Pro: $20/month

Compare to WordPress managed hosting at $25-250/month. Astro hosting costs 10-100x less for equivalent traffic.

When to Choose Astro

Ideal for:

  • Blogs and content sites
  • Marketing and landing pages
  • Documentation sites
  • Portfolio sites
  • E-commerce storefronts (content, not checkout)
  • Any site where SEO and performance matter

Less ideal for:

  • Highly interactive web applications
  • Sites requiring real-time features
  • Projects where non-technical users edit content frequently
  • E-commerce with complex checkout flows

Astro vs WordPress

AspectAstroWordPress
Hosting cost$0-20/month$25-250/month
Core Web Vitals pass rate63%44%
JavaScript shippedZero by default500KB+ typical
Security vulnerabilitiesMinimal (static files)Constant vigilance needed
Content editingMarkdown filesVisual block editor
Plugin ecosystemGrowingMassive
Learning curveDeveloper-focusedUser-friendly

Choose WordPress if: Non-technical team manages content frequently, need specific plugin functionality, WooCommerce required.

Choose Astro if: Developer maintains content, performance is priority, want minimal hosting costs, security matters.

Astro vs Next.js

Both are JavaScript frameworks, but with different philosophies:

Next.js: Application framework that can generate static pages. Ships React runtime by default. Better for interactive applications.

Astro: Content framework that can add interactivity. Ships zero JavaScript by default. Better for content-driven sites.

If you’re building a web application with complex state management, choose Next.js. If you’re building a content site that happens to have some interactive elements, choose Astro.

Getting Started

Create a new project:

npm create astro@latest

Project structure:

src/
  pages/       # File-based routing
  components/  # Reusable components
  layouts/     # Page layouts
  content/     # Markdown content
  styles/      # Global styles

Deploy: Push to GitHub, connect to Netlify or Vercel. Automatic deployments on every commit.

The Bottom Line

Astro represents a return to web fundamentals: HTML-first pages that load fast and work everywhere. The framework provides modern developer experience (components, TypeScript, hot reload) without the JavaScript bloat that typically accompanies it.

For content-driven websites, Astro delivers better performance at lower cost than WordPress or traditional React frameworks. The 80% reduction in page weight translates directly to faster load times, better SEO rankings, and reduced hosting bills.

The trade-off is clear: Astro requires developer involvement for content changes. If your team needs a visual CMS, consider pairing Astro with a headless CMS like Sanity, Contentful, or even WordPress as a backend.

For developers building content sites, Astro has become the default choice for good reason. Ship less JavaScript, load faster, rank higher.