What is Astro? The web framework, explained

Key takeaways

• Astro is an open-source web framework for content-driven websites: marketing sites, documentation, blogs, catalogs and large sets of SEO pages.
• It renders pages to HTML at build time or on the server and ships zero client-side JavaScript by default.
• Interactivity is added through islands, isolated components that load on their own and can be written in React, Vue, Svelte, Solid, Preact or plain JavaScript.
• Content collections give Markdown and data files a typed schema, so a missing field fails the build instead of breaking a live page.
• Choose Astro when content and loading speed matter most. Choose Next.js when the product is a React application with heavy client-side state.

What is Astro? A one-sentence definition

Astro is an open-source JavaScript web framework that builds fast, content-driven websites by rendering HTML on the server and sending JavaScript only for the components that need it.

Astro was first released in 2021 and reached a stable 1.0 in 2022. Since then it has become a common choice for marketing sites and documentation. People also search for it as “Astro JS” or simply “what’s Astro”. All three mean the same thing.

An Astro page is written in a .astro file with two parts. The first is a component script between --- fences, which runs at build time or on the server and can fetch data, import components and read files. The second is an HTML-like template that uses that data. The browser receives the resulting HTML and CSS. Unless you ask for it, the component script never reaches the browser.

How the islands architecture works

The islands architecture treats a page as static HTML (the “sea”) with small interactive regions (the “islands”) that hydrate on their own. Katie Sylor-Miller coined the term in 2019 and Jason Miller, the creator of Preact, popularized it in 2020. Astro was one of the first frameworks built around the pattern.

In practice, every component renders to HTML by default. To make one interactive, you add a client directive that tells Astro when to load its JavaScript:

• client:load hydrates immediately on page load, which suits a navigation menu.
• client:idle waits until the browser is idle, which suits a chat widget.
• client:visible waits until the component scrolls into view, which suits a pricing calculator lower on the page.
• client:media hydrates only when a CSS media query matches, for example a mobile-only drawer.
• client:only skips server rendering and renders in the browser only.

---
import PriceCalculator from '../components/PriceCalculator.jsx';
---
<h2>Estimate your project</h2>
<PriceCalculator client:visible />

Each island is independent, so a heavy component at the bottom of a page does not delay the headline at the top. Recent versions of Astro add server islands (server:defer). These let a personalized fragment, such as a logged-in avatar, render on the server after the rest of the page has been served from cache.

Framework-agnostic components

Astro does not tie you to one UI library. Official integrations cover React, Preact, Vue, Svelte, Solid and Alpine.js, and you can mix them on the same page. A team moving off a React single-page app can keep its existing React components as islands and move the content around them into plain Astro. On shi, RAIN used React islands for the navigation, the contact form and a WebGL2 logo, while the rest of the 215 pages stayed as static HTML.

Zero JavaScript by default: why static output is fast

Most performance problems on marketing sites come from JavaScript: large bundles, hydration of components that never change, and third-party scripts competing for the main thread. Astro starts from the other end. A page with no client directives ships no framework runtime at all.

This helps the three Core Web Vitals:

• LCP (Largest Contentful Paint) improves when the main content arrives as ready-to-paint HTML.
• INP (Interaction to Next Paint) improves when less script runs on the main thread.
• CLS (Cumulative Layout Shift) is easier to control when layout is decided on the server.

Astro also includes image optimization through its built-in astro:assets module, scoped CSS per component, and optional view transitions for app-like page changes without a client-side router. None of this guarantees a score. Fonts, images and tag managers can still slow a site down. The framework just makes the fast path the default one.

Content collections: typed Markdown and data

Content collections are how Astro organizes content. You define a collection in a config file, point a loader at a folder of Markdown, MDX, JSON or YAML (or at a remote CMS or API), and describe its fields with a Zod schema. Astro then validates every entry at build time and generates TypeScript types for it.

The practical benefits are:

• Errors surface early. A guide missing its title or carrying a description that is too long stops the build, so it never reaches production.
• Templates stay simple. One route can render hundreds of entries, which is how programmatic SEO pages, city pages and documentation are built.
• Content stays portable. Markdown files live in Git, are easy to review and can be edited without touching components.

The page you are reading is itself a Markdown entry in an Astro content collection, with its FAQs and metadata validated against a schema before it is published.

Static, SSR and hybrid rendering

Astro builds static sites by default: every page becomes an HTML file at build time, ready for any CDN. When you need fresh data per request, you add an adapter (official ones exist for Node.js, Netlify, Vercel and Cloudflare) and switch on on-demand rendering, also known as SSR.

Rendering is set per route. A mostly static site can render just its search results or account pages on the server by exporting prerender = false from those routes. A mostly dynamic site can do the reverse. This hybrid model means you do not have to pick one strategy for the whole project. Astro also supports API endpoints, middleware and server-side form actions, which cover what most marketing and content sites need from a backend.

Astro vs Next.js: when to choose which

Both are mature, well-supported frameworks. They are optimized for different jobs.

	Astro	Next.js
Primary focus	Content-driven websites	React web applications
Client JavaScript by default	None. Only islands hydrate	React runtime plus client components
UI library	Any (React, Vue, Svelte, Solid, Preact) or none	React
Rendering	Static by default, on-demand SSR per route, server islands	Static, SSR, streaming, incremental regeneration, React Server Components
Content tooling	Built-in typed content collections	Bring your own (MDX, CMS, file loaders)
Navigation model	Multi-page, optional view transitions	Client-side router across the app
Best fit	Marketing sites, docs, blogs, catalogs, SEO page sets	Dashboards, logged-in products, highly interactive apps
Learning curve	Mostly HTML and CSS	React and its server/client model

Choose Astro when most pages are read, not used: a company site, a multilingual services site, a documentation hub, or hundreds of location or product pages. Choose Next.js when most screens are used, not read: a SaaS dashboard, an admin tool, or a product where state lives in the browser. Many teams run both, with an Astro marketing site in front of an application built in another framework.

Is Astro good for SEO and AI answer engines?

Because Astro sends complete HTML, search crawlers and AI answer engines can read the content without executing JavaScript. That matters because not every AI crawler renders scripts. Astro also makes the technical layer easy to automate. Sitemaps, canonical and hreflang tags, JSON-LD structured data and an llms.txt file can all be generated from the same content collection that renders the pages, so they stay in sync.

A framework cannot write useful content or earn links for you. Our guide to what generative engine optimization is covers the content side, and the generative engine optimization service is where we put it into practice.

How RAIN uses Astro

Astro is RAIN Design Studio’s default for static marketing sites. Four recent builds show the range:

Project	Pages	What Astro made easy
Origin Element	42 indexable	36 SEO/GEO content pages from one collection, build-time OG cards (Satori + Sharp), llms.txt generated from site data
Media Progetti	68	French product, city and guide pages, Pagefind search, JSON-LD on 66 of 69 pages
MField & Data Insight	33	Interactive fieldwork cost calculator and a keyboard-accessible 12-region Morocco map as islands
shi	215	155 city pages across 9 Moroccan cities, React islands, WebGL2 logo

The pattern is consistent. Content lives in typed collections, interactivity is limited to the islands that earn it, and every site ships with structured data, a sitemap and llms.txt. When a project needs app-style behavior, as RIVER ERP does, we use Vue 3 and Laravel instead. Astro is a tool for a specific kind of site, not a default for everything.

Planning an Astro website?

If you are weighing Astro for a new site or a migration, book a free 15-minute call. We will tell you plainly whether it fits. Our Astro web development service covers design, build and launch. A marketing site typically takes 3–6 weeks, and custom fixed-scope projects start at $10,000.