The content-first meta-framework. Astro ships zero JavaScript by default and only hydrates the interactive bits — its famous "islands" architecture.
A traditional single-page app ships its whole framework to every visitor — even for a static blog post. Astro renders to HTML and ships almost nothing. Press build to compare the JS payload.
Less JS = faster loads, better Core Web Vitals, happier phones.
// index.astro — renders to pure HTML, 0 KB JS shipped --- const posts = await getPosts() // runs at build time --- <ul>{posts.map(p => <li>{p.title}</li>)}</ul>
Most of the page is static HTML (free). Only "islands" get JavaScript, via directives like client:load. Flip the switch to hydrate the island — then its button actually works.
// only this component ships JS — the rest stays static HTML <Header /> <Article /> <LikeButton client:load /> // 👈 the island
Astro is framework-agnostic — you can drop React, Vue, Svelte, Solid and Preact components onto the same page. Click one to "mount" it as an island.
Astro's file routing also turns Markdown/MDX content collections into pages. Click a file to see its route.
An .astro file becomes a static page.