What is Astro JS? How it works and when to use it

Astro, or Astro JS as many people search for it, is a JavaScript framework for building fast-loading websites, and it has had a big 2026. 

Cloudflare acquired the company behind it in January, and Astro 7 shipped in June with builds that run up to 61% faster in Astro's own benchmarks. All that attention has put the framework on the radar of marketing teams that want fast, content-heavy websites.

If you're thinking about using Astro for your website, this guide is for you. We build marketing sites on Webflow, Sanity, and Astro, so we've seen where Astro shines and where it creates more work than it saves. By the end, you'll know what Astro does, how it works in plain terms, what changed this year, and whether it fits your site and your team.

What is Astro JS?

Astro JS is a free, open-source web framework for building fast, content-driven websites. By default, it renders pages to HTML on the server and sends the browser finished pages instead of a JavaScript application. This keeps marketing sites, landing pages, blogs, and documentation quick to load and easy for search engines to read.

The phrase "content-driven" carries most of the meaning here. Most popular JavaScript frameworks were designed for web apps like dashboards and inboxes, where people click around for hours. Marketing site visitors mostly read, scroll, click a link or two, and occasionally fill in a form, so Astro optimises for how fast the first page appears.

What is Astro used for?

Astro is used to build content-driven websites, including marketing sites, blogs, documentation, landing pages, and content-led ecommerce storefronts. These are sites where most visitors read rather than interact, which is exactly the kind of page Astro makes fast.

A typical B2B landing page has one interactive element, usually a demo request form. Everything else is text, images, logos, and layout that never changes once the page loads, and Astro treats that static majority as plain HTML.

Plenty of large companies already rely on it. According to Cloudflare's acquisition announcement, Astro powers two kinds of big names:

• Major brands like Unilever, Visa, and NBC News.
• Website platforms running on Cloudflare, with Astro as "the backbone for successful platforms like Webflow and Wix."

In other words, many teams already depend on Astro indirectly without ever having touched it.

Who owns Astro after the Cloudflare acquisition?

Cloudflare has owned The Astro Technology Company since January 16, 2026, when the Astro team announced it was joining the technology company. Every full-time employee moved over and still works on Astro full-time. 

A few things matter if you're betting a website on Astro:

• It's still free to use, with an open-source MIT license.
• It still runs anywhere, with continued support for hosts other than Cloudflare.
• Adoption was already strong, with Astro downloaded almost 1,000,000 times per week when the deal was announced.

In our view, the acquisition makes Astro a safer choice for marketing teams. Astro now has a large infrastructure company paying its core team, which makes it far less likely to stall.

Vendor influence is a fair concern, so watch whether other hosts keep getting equal attention in release notes. So far they have, with Astro 7's experimental CDN caching covering Netlify and Vercel alongside Cloudflare.

How does Astro work?

Astro turns your pages into HTML on the server and sends that finished HTML to the browser. It then adds JavaScript only to the parts of a page that need to be interactive, which Astro calls islands. Everything else stays as lightweight, static HTML.

Picture a printed brochure with a few small motors attached. The headlines, copy, photos, and layout are printed once and handed over complete. Only the parts that need to move, like a signup form or a pricing toggle, get their own motor.

In technical terms, printing the brochure is what developers call server-first rendering, and attaching a motor is called hydration.

• Server-first means the work of building a page happens on a server before the page reaches the visitor's browser.
• Hydration is the step where JavaScript loads in the browser and makes static HTML interactive. Many frameworks hydrate the entire page, while Astro hydrates only the pieces that need it.

Server-first rendering in Astro

Astro can build pages in two ways, and most sites mix both:

• Static pages are built ahead of time and served as files, which suits blog posts, landing pages, and anything that changes only when someone publishes.
• On-demand pages are rendered on a server when someone requests them, which suits personalised content or live data. On-demand rendering needs an adapter, a small plugin that connects Astro to a specific host. Astro maintains official adapters for Cloudflare, Netlify, Node, and Vercel.

Marketing teams get two benefits from this approach:

• Fast first loads, because the browser has less work to do.
• Full visibility for search and AI, since search engines and AI crawlers can read every word on the page without running any JavaScript.

What is Astro islands architecture?

Astro islands architecture is a way of building pages where most of the page renders as static HTML, while small interactive components, called islands, load JavaScript only where they're needed. By default, Astro strips client-side JavaScript out of every component unless a developer explicitly opts in.

The example below shows a simple pricing page with one island.

---
import Header from '../components/Header.astro';
import NewsletterForm from '../components/NewsletterForm.jsx';
---
<Header />
<h1>Our pricing</h1>
<p>Plans for teams of every size.</p>
<NewsletterForm client:visible />

The header, heading, and paragraph ship as plain HTML. The React newsletter form is the only island, and the client:visible instruction tells Astro to load its JavaScript only when the form scrolls into view.

Islands can be written in React, Vue, Svelte, Alpine.js, and other UI frameworks, and one site can mix them. If your developers have already built React components for your product or an older site, they can usually reuse them in Astro instead of rewriting them.

Astro also supports server islands, marked with server:defer in the code. They let an otherwise static page include a personalised piece, like a logged-in banner or a location-specific offer, which the server fills in separately so the rest of the page still loads instantly.

Content collections and the content layer

Astro handles content with two features that work together:

• Content collections organise content like blog posts, case studies, product pages, or team bios. Each collection has a schema, a set of rules for which fields every entry needs. If an entry is missing a required field, like a meta description or an author, the build fails before the broken page can go live. 
• The content layer sits underneath collections and lets Astro load content from almost anywhere, including Markdown files, an API, or a headless CMS, through the same setup. A page template doesn't care whether a blog post came from a file in the codebase or from Sanity.

In practice, editors write and publish in a CMS like Sanity, and Astro turns that content into pages.

Astro features that matter to marketing teams

Astro's homepage lists more than a dozen features, mostly aimed at developers. The table below keeps only the ones that affect speed, search visibility, editing, security, and flexibility.

For a typical B2B marketing site, the features that matter most are zero JavaScript by default and content collections. The first protects your Core Web Vitals without anyone having to police every new script, and the second stops half-finished content from reaching production.

Astro also ships an official MCP server, which connects AI coding tools to Astro so they can work with the framework more accurately. We'll cover it in a separate article.

What's new in Astro 6 and Astro 7?

Astro 6, released on March 10, 2026, added live content collections and a stable Content Security Policy API. Astro 7, released on June 22, 2026, made builds 15-61% faster in Astro's own benchmarks. The current version is Astro 7.4, released on October 15, 2026.

Astro 6 brought two changes worth knowing about:

• Live content collections fetch content when a visitor requests the page, while regular collections load it when the site is built. That lets prices, stock levels, job listings, or event dates update without a full rebuild.
• Node 22 or later is now required, which can mean an infrastructure upgrade for teams on older hosting.

Astro 7 focuses on speed:

• Faster builds cut a full build of Astro's own website, roughly 308 pages, from 62.70 seconds to 24.24 seconds.
• Quicker publishing follows, because every publish on a statically built site triggers a rebuild. A typo fix or a new landing page reaches visitors sooner.
• Incremental static builds arrived in Astro 7.2 in August 2026 and can skip rebuilding pages that haven't changed. They're still experimental, so we'd wait before relying on them in production.

What are the pros and cons of Astro?

Astro's biggest strengths are page speed and search-friendly HTML. Its biggest drawback is that marketers need a developer to change layouts and a headless CMS to edit content.

For a company of 10 to 500 people, the trade-off boils down to who changes the website. If your marketing team mostly publishes content into existing templates and has a developer or agency for new layouts, Astro's cons barely register, and its speed becomes a real advantage. But if your marketers expect to build new page designs themselves every week, those cons become the daily experience.

When to use Astro and when not to

Use Astro for content-heavy marketing sites where speed matters and developers are available to build and maintain templates. Skip it when your site is mostly an app, when your marketing team has no developer support, or when marketers need to build and rearrange page layouts visually.

We build sites with Astro, but we still steer teams away from it when we see one of three signals.

• Skip Astro if your website behaves mostly like an app. Islands work well for a handful of interactive pieces on a content page, and they become awkward when logged-in dashboards and real-time data make nearly every element interactive.
• Skip Astro if nobody on your side can write code. Even with a CMS, a new page type or layout change needs a developer, and so does reworking the navigation. Without one in-house or an agency on call, every small change turns into a ticket and a wait.
• Skip Astro if your marketers want to design pages themselves. Teams that launch a campaign page every week want to drag sections around and publish the same afternoon. Astro with a headless CMS can give editors flexible sections, but it won't match a visual builder for that freedom.

When is Webflow the better fit?

Webflow is the better fit when your marketers want to build, edit, rearrange, and publish pages visually without waiting for a developer. Hosting, the CMS, and the design tool live in one place, so there is less to set up and less to maintain.

That's why Webflow remains our default recommendation for marketing teams that want to own their website day to day. For most growing B2B teams, publishing pages quickly matters more than shaving a few milliseconds off load time.

With Astro, developers own the templates while editors work in a headless CMS like Sanity, so editors get structured content but don't design pages. If you're deciding between a headless setup and Webflow, our Sanity vs Webflow comparison explains the trade-offs.

When is Next.js the better fit?

Next.js is the better fit when your site behaves more like an app, with heavy interactivity, logged-in experiences, or a product team that already works in React every day.

Picture a SaaS company whose marketing site shares a login, a pricing calculator, a help centre, and an account area with the product. If the product team already builds in Next.js, keeping the marketing site in the same framework means one codebase, one component library, one deployment pipeline, and one team that can work on both. We'll compare the two frameworks in depth in our upcoming Astro vs Next.js guide.

Is Astro free?

Yes, the Astro framework is free and MIT-licensed, so there are no license fees for commercial use. A production Astro website still has costs, because the framework is only one layer of what you pay for.

Those costs come from hosting, a headless CMS plan, the design and build, and ongoing maintenance. For real numbers on each layer, see our Astro pricing breakdown.

Do you need an Astro CMS?

Astro runs without a CMS, but a marketing team almost always needs one. Without an Astro CMS, content lives in code files inside the project's repository, and every edit, even a typo fix, goes through a developer.

A headless CMS fixes this by keeping content in a separate editing app and delivering it to Astro through an API. If the headless model is new to you, our explainer on headless vs traditional CMS covers the basics.

We pair Astro with Sanity, and the setup has three parts:

• Sanity Studio gives editors a customisable interface to write and manage content.
• Astro renders that content into pages.
• A host like Cloudflare, Netlify, or Vercel deploys and serves the site.

Sanity's structured content fits Astro's content collections well, because both treat content as defined fields instead of blobs of formatted text. Our What is Sanity guide explains how Sanity works in more detail.

Astro's docs also include integration guides for other CMSs, like Contentful and headless WordPress.

Someone also has to own the moving parts after launch, from Astro releases to hosting settings and CMS schema changes. Keeping all of that running is what we call WebOps, and our WebOps explainer shows how teams handle it.

Is Astro right for your website?

Astro is a strong fit if you run a content-heavy marketing site, have developer support, care about page speed, and are happy to work within set page templates. Run it through this checklist to confirm:

• Is your site mostly made up of pages people read, like blog posts, landing pages, and resources?
• Do you have in-house developers or an agency to build templates and make layout changes?
• Are page speed and Core Web Vitals a priority for your SEO or paid campaigns?
• Are you comfortable running a separate CMS and host?
• Can your marketers work within existing templates and sections instead of designing new layouts visually?
• Are you planning a redesign or migration anyway?

If you answered yes to most of these, Astro deserves a serious look. If you said no to the developer and visual-building questions, Webflow will likely serve your team better. And if your current site is slow, start by finding out why, because our guide to failed Core Web Vitals assessments shows how to diagnose the problem before you change platforms.

If you're weighing Astro for your next website, talk to our team. We'll tell you whether Sanity and Astro fit the way your team works, even if the answer turns out to be Webflow.

Frequently asked questions about Astro