Astro
- Pronunciation
- AS-troh
In short
Astro is a web framework for content-driven sites that renders pages to HTML and ships no JavaScript by default, adding it only to interactive islands.
What is Astro?
Astro is an open-source framework for websites where most of each page is content to read, such as blogs, documentation, marketing pages and online stores. Pages and components are written in .astro files: a script section between --- fences runs at build time or on the server, and the HTML template below it uses its data. The result is plain HTML and CSS, with no JavaScript sent to the browser unless you ask for it.
Interactivity comes from the islands architecture. A page is a sea of static HTML with a few islands that need JavaScript, such as a search box or an image carousel. You can write those as React, Vue, Svelte, Solid or Preact components, even mixed on one page, and a directive decides when each one loads: client:load right away, client:idle when the browser is idle, or client:visible when it scrolls into view. Astro builds static pages by default and, with an adapter for your host, can also render pages on the server for each request.
Astro reached version 1.0 in 2022 and is built on Vite. In January 2026, The Astro Technology Company, the team behind it, joined Cloudflare; the framework stays open source under the MIT license and still deploys to any host.
Astro is often compared with Next.js. Next.js is a React framework for full web applications and sends React to the browser to run the interface. Astro is content-first, works with several UI frameworks and treats each page as its own HTML document, like a multi-page application, so it ships far less JavaScript on content sites; it is a weaker fit for app-like screens where almost everything is interactive, such as a design tool.
Key takeaways
- Astro is a framework for content-driven websites such as blogs and documentation.
- Pages render to HTML and ship no JavaScript by default.
- Interactive parts are islands, written in React, Vue, Svelte or others, that load on their own.
- It builds static sites by default and can also render on the server.
- Its company joined Cloudflare in 2026; Astro remains open source under the MIT license.
Example
---
// Runs at build time or on the server, never in the browser
import { getCollection } from "astro:content";
import SearchBox from "../components/SearchBox.jsx";
const posts = await getCollection("blog");
---
<h1>Blog</h1>
<!-- A React island: its JavaScript loads only when it scrolls into view -->
<SearchBox client:visible />
<ul>
{posts.map((post) => <li><a href={`/blog/${post.id}/`}>{post.data.title}</a></li>)}
</ul>Readers ask
Is Astro a static site generator?
It started as one and still builds static pages by default. With an adapter it can also render pages on the server for each request, so it covers both static and dynamic sites.
Can I use React with Astro?
Yes. Astro has official integrations for React, Vue, Svelte, Solid and Preact. Components render to HTML on the server, and only those with a client:* directive load their JavaScript in the browser.
What is the difference between Astro and Next.js?
Next.js is a React framework for full web applications and sends React to the browser to run the interface. Astro is aimed at content sites, works with several UI frameworks and sends JavaScript only for the interactive islands.
See also
- SSGWeb Development, p. 52SSG is a technique that renders a website's pages to plain HTML files at build time, so servers or CDNs can deliver them instantly without extra work.
- HydrationWeb Development, p. 26Hydration is the step where JavaScript in the browser takes over server-rendered HTML, attaching event handlers and state so the page becomes interactive.
- MPAWeb Development, p. 36An MPA is a website or web app where each link or form submission loads a new HTML page from the server, the classic way the web has worked since its start.
- Next.jsWeb Development, p. 37Next.js is a React framework that adds routing, server-side rendering, static generation and server code, so a whole web app can be built as one project.
- ViteWeb Development, p. 64Vite is a fast build tool for web projects: it serves code to the browser almost instantly in development and bundles it into optimized files for production.
- SSRWeb Development, p. 53SSR is a technique where the server builds the full HTML for a page on each request, so users and search engines receive ready-to-read content immediately.
Sources
Spotted a mistake or something missing on this page?Suggest an edit