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.