Astro

What is Astro?

Astro is an open-source web framework for content-driven sites such as blogs, documentation, marketing pages and shops. It renders pages to static HTML at build time by default and sends JavaScript to the browser only for the interactive parts you choose, called islands. You write pages as components and can use React and other UI frameworks inside them.

Astro's docs currently list version 7 as the latest major release (checked October 2026).

How Astro works

Static first, on demand when needed

The default output mode is static: pages and endpoints are prerendered to HTML at build time, the model described in static site generation. To render a route on every request you add a server adapter (Node, Netlify, Cloudflare, Vercel and others) and set export const prerender = false on that page. Setting output: 'server' flips the default so every page renders on demand, as in server-side rendering.

Islands and zero JavaScript by default

Astro strips client-side JavaScript from UI components unless you opt in. A client:* directive turns a component into an interactive island that is hydrated on its own: client:load hydrates immediately, client:idle when the browser is idle, and client:visible when the component enters the viewport. Everything around the island stays plain HTML. See Astro's islands documentation for the details. Server islands (server:defer) work the other way round: a dynamic piece renders separately on the server while the rest of the page shows a placeholder.

Content collections

Content collections manage sets of similar content such as blog posts. You define them in src/content.config.ts with a loader (glob() reads Markdown, MDX, JSON and YAML files, file() reads one file) and an optional Zod schema that validates the front matter and generates TypeScript types. A file that breaks the schema fails the build instead of reaching production.

Example

On a product page, the header, description and images are static HTML. The "Add to cart" button is a React component with client:visible, so its JavaScript downloads only when the visitor scrolls to it. A "recently viewed" strip that depends on the user can be a server island with a placeholder. The rest of the site stays cacheable on a CDN.

Common mistakes

• Putting client:load on every component. That sends the same JavaScript a single-page app would, and removes the main benefit.
• Choosing Astro for an app-like dashboard with large shared client state. A framework built around single-page apps such as Next.js may fit better there.
• Forgetting the adapter. Without one, a page cannot render on demand.
• Assuming static means untestable. Forms, API endpoints, on-demand routes and server islands still run on a server and can slow down under traffic.

Astro, performance testing and monitoring

A static Astro build served from a CDN usually has a low time to first byte, but that is a claim to measure, not assume. Track Lighthouse scores and Core Web Vitals over time with page speed monitoring, and run a quick spot check with the Core Web Vitals checker. Read how to set performance budgets for web apps to turn the numbers into limits that fail a build. If you render routes on demand, use load testing to see how those routes behave under concurrent traffic. For other generators, compare Eleventy. For general speed work, see the guide to monitoring Core Web Vitals with alerts.

FAQ

Is Astro a static site generator?

Mostly, yes. Its default output is static HTML built ahead of time. It can also render pages on demand once you add a server adapter, so it covers both static and server-rendered sites.

Is Astro good for SEO?

Pages arrive as complete HTML, so search engines can read the content without running JavaScript, and shipping less JavaScript helps load metrics. Rankings still depend on content quality and the rest of your site.

Can I use React, Vue or Svelte with Astro?

Yes. Astro has integrations for UI frameworks such as React, and you add an integration to use a framework's components as islands. You can keep most of the page in Astro components and hydrate only what needs interaction.

What are Astro islands?

An island is an interactive UI component on an otherwise static page. It is hydrated separately from the rest of the page, so only the JavaScript it needs is loaded.