Astro

What Is Astro?

Astro is a web framework designed for content-driven websites that ships zero JavaScript by default. Created by Fred K. Schott and the Astro team, the framework uses an islands architecture that enables using components from React, Vue, Svelte, and other frameworks within the same page while only hydrating interactive components.

Islands Architecture

Astro renders pages to static HTML on the server and identifies interactive components as islands. Only these islands receive JavaScript for hydration, while the rest of the page remains static HTML. This approach dramatically reduces the JavaScript sent to the browser compared to full-page hydration.

Client Directives control when islands hydrate: on page load, when visible in the viewport, when the browser is idle, or on media query match. Most content-heavy pages need no client-side JavaScript at all.

Multi-Framework Support

Astro supports components from React, Vue, Svelte, Preact, Solid, Lit, and Alpine.js within the same project. Teams can use the framework they prefer for interactive components without committing the entire site to a single framework.

Content Collections

Content Collections provide type-safe content management for Markdown, MDX, and data files. Collections define schemas for frontmatter validation, and Astro generates TypeScript types for type-checked queries.

Performance

Astro sites consistently achieve perfect or near-perfect Lighthouse scores because they ship minimal JavaScript. Static HTML with targeted hydration provides the fastest possible page loads while enabling interactivity where needed.

Why Choose Astro

Content-heavy websites including blogs, documentation, marketing sites, and portfolios choose Astro for its exceptional performance. The multi-framework support is ideal for teams transitioning between frameworks or using different libraries for different components.