Astro

Meta-Frameworks

The web framework for content-driven websites

weekly downloads1.3M

versionv5.17.3

licenseMIT

Islands architectureZero JS by defaultAny UI framework

Overview

Astro is an open-source web framework designed for building content-driven websites like blogs, documentation sites, and marketing pages. It distinguishes itself through an "islands architecture" that ships zero client-side JavaScript by default, only hydrating interactive components when needed. This approach delivers exceptional performance for static content while allowing developers to use familiar UI frameworks like React, Vue, or Svelte for dynamic sections.

The framework prioritizes developer experience with file-based routing, built-in TypeScript support, and a unified content layer that fetches data from Markdown files, APIs, or databases with automatic caching. Astro 5.0 introduced significant improvements including 5x faster Markdown builds, type-safe environment variables via the astro:env module, and a Content Layer API that reduces memory usage by 25-50% for content-heavy projects.

With over 1.3 million weekly downloads, Astro has gained adoption among developers building portfolios, technical documentation, e-commerce storefronts, and news sites. It supports hybrid rendering strategies—combining static site generation (SSG) for most pages with server-side rendering (SSR) for dynamic routes—and deploys seamlessly to edge networks, traditional Node.js servers, or serverless platforms.

The framework shines when you need excellent Core Web Vitals scores without sacrificing modern tooling. Unlike traditional static site generators, Astro allows you to bring your preferred UI library for interactive components while maintaining minimal JavaScript payloads. Its zero-config optimizations handle code splitting, image optimization, and critical CSS extraction automatically.

Quick Start

typescript

// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
  output: 'hybrid'
});

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    publishDate: z.date(),
    author: z.string(),
    tags: z.array(z.string())
  })
});

export const collections = { blog };

// src/pages/blog/[slug].astro
---
import { getCollection } from 'astro:content';
import Counter from '../../components/Counter.jsx';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<html lang="en">
  <head>
    <title>{post.data.title}</title>
  </head>
  <body>
    <article>
      <h1>{post.data.title}</h1>
      <time>{post.data.publishDate.toLocaleDateString()}</time>
      <Content />
      <Counter client:visible initialCount={0} />
    </article>
  </body>
</html>

// src/components/Counter.jsx (React island)
import { useState } from 'react';

export default function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicks: {count}
    </button>
  );
}

Use Cases

Technical documentation sites: Astro's content collections provide type-safe frontmatter validation for Markdown/MDX files, making it ideal for docs with hundreds of pages. The fast build times and built-in syntax highlighting streamline documentation workflows.

Marketing and landing pages: Ship fully static HTML with zero JavaScript for instant loads and perfect SEO. Use islands architecture to hydrate only interactive elements like newsletter forms or pricing calculators, keeping Time to Interactive minimal.

Blogs and content publications: The Content Layer API caches parsed Markdown content and supports loading from headless CMSs or databases. Fast rebuilds (5x faster than v4) make it practical for sites with thousands of posts.

E-commerce storefronts: Combine static product pages (pre-rendered at build time) with SSR for cart/checkout flows. Integrate React/Vue components for product filters while keeping category pages pure HTML for speed.

Portfolio and agency websites: Leverage Astro's image optimization and third-party script management to build visually rich sites that maintain 90+ Lighthouse scores. The component system allows creating reusable UI patterns without framework overhead.

Pros & Cons

Pros

+Zero JavaScript by default with selective hydration results in significantly faster page loads and better Core Web Vitals compared to full-stack frameworks
+Framework-agnostic component support lets you mix React, Vue, Svelte, and Solid components in the same project without conflicting runtimes
+Content Layer with type-safe collections, automatic caching, and 5x faster Markdown builds streamlines content-heavy site development
+Hybrid rendering flexibility allows per-route SSG/SSR decisions with edge deployment support for optimal performance and dynamic capabilities
+Built-in optimizations like image processing, critical CSS extraction, and automatic code splitting require no configuration

Cons

−Not ideal for highly interactive single-page applications that require extensive client-side state management and routing
−Smaller ecosystem compared to Next.js or Nuxt means fewer third-party integrations and community plugins available
−Learning curve for the islands architecture pattern and understanding when to use client directives like client:load vs client:visible

Comparisons

astro vs remixmeta-framework →next vs astrometa-framework →astro vs @sveltejs/kitmeta-framework →

Install

bash

npm install astro

bash

pnpm add astro

bash

bun add astro

↗ View full npm package details