Astro is a web framework for building content-heavy websites — blogs, docs, marketing pages, portfolios. Its killer feature: it ships zero JavaScript to the browser by default.
Most frameworks (Next.js, Nuxt) send a JavaScript bundle to the browser even for static content. Astro renders everything to plain HTML at build time. The result is extremely fast pages.
Zero JS by default
A typical Astro page:
---
// This runs at build time (server-side)
const posts = await fetch('https://api.example.com/posts').then(r => r.json());
---
<html>
<body>
<h1>My Blog</h1>
{posts.map(post => <article>{post.title}</article>)}
</body>
</html>The output is pure HTML. No JavaScript framework ships to the browser. The page loads instantly.
Islands architecture
Need interactivity? Astro uses “islands” — isolated interactive components in a sea of static HTML:
---
import StaticHeader from './Header.astro'; // No JS
import SearchBar from './SearchBar.react'; // Interactive
---
<StaticHeader /> <!-- Pure HTML -->
<SearchBar client:load /> <!-- React component, hydrated -->
<footer>© 2026</footer> <!-- Pure HTML -->Only the search bar ships JavaScript. Everything else is static HTML. You choose exactly which components need interactivity.
Use any framework
Astro lets you use components from React, Vue, Svelte, Solid, or Preact — even mix them on the same page:
---
import ReactCounter from './Counter.react';
import SvelteToggle from './Toggle.svelte';
---
<ReactCounter client:visible />
<SvelteToggle client:load />Or use Astro’s own .astro components for anything that doesn’t need client-side interactivity (which is most things on content sites).
Content collections
Astro has built-in support for Markdown and MDX content with type-safe schemas:
src/content/
blog/
first-post.md
second-post.mdQuery them with type safety:
---
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
---When to use Astro
Perfect for: blogs, documentation, marketing sites, portfolios, any content-heavy site where performance matters.
Not ideal for: highly interactive apps (dashboards, social media feeds, real-time collaboration). Use Next.js, Remix, or SvelteKit instead.
Astro vs. alternatives
| Framework | JS shipped | Best for |
|---|---|---|
| Astro | Zero (unless you opt in) | Content sites |
| Next.js | Full React bundle | Full-stack React apps |
| Hugo | Zero | Static sites (Go templates) |
| Gatsby | Full React bundle | React static sites |
| 11ty | Zero | Simple static sites |
This site (aimadetools.com) is built with Astro.
If you’re comparing static site frameworks, see Astro vs Gatsby. Astro uses Vite under the hood for its fast dev server and build pipeline.
FAQ
Can I use Astro for a full-stack app with authentication?
Astro supports server-side rendering (SSR) and API endpoints, so you can build full-stack features. However, for highly interactive apps with complex state management, frameworks like Next.js or SvelteKit are a better fit.
Does Astro work with existing React components?
Yes. You can import React components directly into Astro pages and use client:load or client:visible directives to hydrate them. This makes migrating from a React-based static site generator straightforward.
How does Astro’s build performance compare to other frameworks?
Astro builds are typically very fast because it outputs plain HTML by default and only processes JavaScript for interactive islands. Sites with hundreds of pages build in seconds rather than minutes.
Related: how-i-built-this-blog