Headless CMS with Astro: manage content without sacrificing speed

You want a fast website, but your editors want to manage content without touching code. That does not have to be a contradiction. A headless CMS separates the writing of content from its presentation, and Astro takes care of that presentation. The result: a familiar editor for your team and a lightweight, fast site for your visitors. In this guide you will read what a headless CMS is, how it works together with Astro, and which of the three approaches fits your project best.

What is a headless CMS?

A headless CMS manages your content separately from the way it is displayed, and delivers that content through an API. Unlike a traditional, coupled CMS (such as a classic WordPress installation), a headless CMS does not generate a website itself. As the Astro documentation puts it: the CMS helps you write content, but does not display it itself; you fetch the content data and use it in your project.

The word “headless” refers to that decoupling: the “body” (the management) is separate from the “head” (the presentation). You choose the head, and that is where Astro comes in.

Why does a headless CMS fit well with Astro?

Astro is designed to handle the presentation and ships no client-side JavaScript to the browser by default. That philosophy aligns seamlessly with a headless CMS: the CMS delivers the data, Astro builds a fast page from it.

We are taking an alternative approach which is to treat the website not as a JavaScript application but as a collection of HTML pages. Fred Schott, creator of Astro

Your editors get a visual editor, standardised content types and collaboration, while visitors get the speed of a static or edge-rendered frontend. So you do not have to choose between management comfort and performance.

The three ways to manage content in Astro

Before you reach for a CMS, it pays off to put the three options side by side. Not every project needs the same thing.

Approach	Best for	Editing	Example
Content Collections (Markdown or Git)	Developers, small teams, docs and blogs	In files, via Git	Local .md files
Visual headless CMS	Non-technical editors	In a visual editor	Storyblok, Sanity, Contentful
Headless WordPress	Teams that already know WordPress	In the WordPress editor	WordPress as source

1. Content Collections (Markdown or Git)

Astro has built-in Content Collections. You define a schema and Astro checks your content during the build, with automatic TypeScript type-safety. The built-in loaders fetch content from folders with Markdown, MDX, Markdoc, JSON, YAML or TOML. For a blog or documentation site managed by developers, this is often the simplest and fastest choice, with no external dependency.

2. A visual headless CMS

If non-technical editors are involved, a visual headless CMS offers a familiar editor with previews and roles. Astro fetches the content from the CMS, and you keep control over the presentation.

3. Headless WordPress

If you already have a WordPress site, you can keep it as the content source and build the public site with Astro. Your team keeps working in the WordPress editor, visitors get a faster site.

How does Astro fetch content from a headless CMS?

Astro offers several routes for this, depending on the CMS:

• An Astro integration. Some CMSes, such as Storyblok, offer an integration that fetches content specifically for an Astro site.
• A JavaScript SDK. Others provide an SDK that you install to fetch your remote content.
• The Content Loader API. You can build a custom loader to fetch content from any source: a CMS, a database or an API endpoint.

There is also an important distinction in timing. A build-time loader fetches data during the build and stores it in a data store. A live loader fetches data fresh on every request, without a data store, and can filter incoming data and verify it with type-safety. For content that rarely changes you choose build-time; for content that needs to be fresh, a live loader or on-demand rendering.

Which headless CMSes work with Astro?

Astro offers official guides for a large number of CMSes. A selection of the best known:

• Storyblok, with an official Astro integration;
• Sanity, focused on structured content;
• Contentful, via the contentful.js SDK;
• Strapi, an open source, customisable headless CMS;
• Hygraph, with a GraphQL endpoint;
• Directus, a backend-as-a-service;
• headless WordPress.

In addition, there are guides for dozens of others (from Ghost and Prismic to Decap and Payload). Astro deliberately does not single out any as “the best”: the right choice depends on your team, your budget and your workflow.

Headless WordPress with Astro

WordPress deserves a separate mention, because so many sites already run on it. WordPress comes with a built-in REST API to connect your data to Astro; optionally you install WPGraphQL or Gato GraphQL for GraphQL. This way you keep the familiar WordPress editor as the content source and build the frontend with Astro. If you are considering the switch from WordPress, read migrating from WordPress to Astro, where headless WordPress is covered as an intermediate step.

What should you watch out for?

A few honest points of attention:

• Build time on large sites. If you fetch everything at build time, you can get long builds with very many pages. In that case on-demand or live rendering is a way out.
• Previews. If you want editors to see changes live before publication, you need a preview setup (often via live loaders or on-demand rendering).
• Costs. Hosted CMSes have varying plans, from free tiers to paid subscriptions. Check the CMS’s current pricing page; do not make anything up.
• Dependency. An external CMS is an extra service to manage and pay for. For small sites that is sometimes unnecessary.

When do you not need a separate CMS?

Not every site needs a headless CMS. If developers mainly manage the content, or it concerns a blog or documentation that lives in Markdown, then Content Collections are more than enough. That way you avoid an extra service, an extra cost and an extra integration. Start simple, and only switch to a CMS when non-technical editors need to be able to publish themselves.

Conclusion

A headless CMS with Astro gives you the best of both worlds: comfortable content management and a fast, lightweight frontend. The choice comes down to your team. If developers manage the content, Content Collections are often enough. If non-technical editors are involved, a visual headless CMS or headless WordPress offers the familiar editor, while Astro takes care of the speed. Want the broader trade-off between Astro and WordPress first? Then read Astro vs WordPress, or start with what Astro is.