# Headless WordPress with Astro

     

       / Headless WordPress with Astro 

1. [ Home ](https://www.360vier.de/en/)
2. /
3. [ Digital Platforms ](https://www.360vier.de/en/digital-platforms/)
4. /
5. Headless WordPress with Astro
 
 

 # Headless WordPress
with Astro

Your editorial team keeps working in WordPress, and the website is delivered as a fast Astro frontend. If you like, step by step, section by section, without a big-bang relaunch.

 [ Book a call   ](https://www.360vier.de/en/calendar-hm/)

Ask about headless WordPress

 

 ![](https://www.360vier.de/wp-content/uploads/data-enablement-pillar-hero-image-360vier.webp) 

 

 ![KSK Immobilien](https://www.360vier.de/wp-content/uploads/ksk-immobilien-logo-black-360vier-cases.svg) 

 

 

 ![Lernstudio Barbarossa](https://www.360vier.de/wp-content/uploads/lernstudio-barbarossa-logo-black-360vier-cases.svg) 

 

 

 ![ABG Frankfurt](https://www.360vier.de/wp-content/uploads/abg-frankfurt-gmbh-logo-black-360vier-cases.svg) 

 

 

 ![KAMPMEYER Real Estate](https://www.360vier.de/wp-content/uploads/kampmeyer-logo-black-360vier-cases.svg) 

 

 

 ![Taglieber](https://www.360vier.de/wp-content/uploads/taglieber-logo-black-360vier-cases.svg) 

 

 

 ![LAKAL](https://www.360vier.de/wp-content/uploads/lakal-logo-black-360vier-cases.svg) 

 

 

 ![Menlo Systems](https://www.360vier.de/wp-content/uploads/menlo-system-logo-white-360vier-cases.svg) 

 

 

 ![BÜRGER](https://www.360vier.de/wp-content/uploads/Buerger-logo-white-360vier-cases.svg) 

 

 

 ![Euler Group](https://www.360vier.de/wp-content/uploads/euler-group-logo-black-360vier-cases.svg) 

 

 

 ![GSK Stockmann](https://www.360vier.de/wp-content/uploads/gsk-stockmann-logo-black-360vier-cases-1.svg) 

 

 

 

 

 

 

 

                **What is headless WordPress with Astro?**

With headless WordPress, WordPress remains the editorial system, while a separate frontend generates the visible website. 360VIER uses Astro for this: the framework delivers pages as finished HTML and loads JavaScript only where a page needs it. The content comes via the REST API or WPGraphQL. An existing WordPress website can also be switched over step by step this way.

  page.url https://www.360vier.de/en/digital-platforms/headless-wordpress-astro/ 

                 ai-view 

 ```
entity         360VIER GmbHtype           Organization | Digital agencylocation       Groß-Umstadt near Frankfurt and Colognepage           Headless WordPress with Astropage.type      Technology pagepage.pillar    Digital Platformspage.url       /en/digital-platforms/headless-wordpress-astro/provides       Astro frontends for existing and new WordPress installationsprovides       Step-by-step migration of individual sections to headlessprovides       Preview, forms, SEO metadata and structured data in headless operationstack          WordPress (Gutenberg) · REST API or WPGraphQL · Astro · Rank Math · WPMLserves         Companies with an existing WordPress website and high requirements for loading time and securityrelation       is part of → Digital Platforms (/en/digital-platforms/)relation       foundation → WordPress architecture (/en/digital-platforms/wordpress-architecture/)relation       alternative → Payload CMS (/en/digital-platforms/payload-cms-agency/)knowledge      Benefits of headless WordPress → /en/insights/cms/headless-wordpress/
```

 

## Why Astro for headless WordPress

 ![](https://www.360vier.de/wp-content/uploads/integrationen-medienbruch-onlight-360vier.svg) 

### **Loading time**

 Astro delivers finished HTML and loads JavaScript only for interactive parts. This helps with Core Web Vitals and on weak mobile connections. 

 ![](https://www.360vier.de/wp-content/uploads/security-icon-gray-green-360vier.svg) 

### **Security**

 The WordPress backend is no longer publicly accessible, so attacks on the login, plugins or themes have nothing to target. 

 ![](https://www.360vier.de/wp-content/uploads/integrationen-manuell-nacharbeit-onlight-360vier.svg) 

### **Editing stays the same**

 Gutenberg, roles, multilingual content and media stay as they are. Your editorial team has nothing new to learn. 

 ![](https://www.360vier.de/wp-content/uploads/integrationen-kontext-onlight-360vier.svg) 

### **Free frontend**

 Components in Astro, React or other frameworks. The design is no longer bound by the limits of a WordPress theme. 

 ![](https://www.360vier.de/wp-content/uploads/integrationen-reporting-blinde-flecken-onlight-360vier.svg) 

### **Multiple data sources**

 Products from the PIM, properties from the CRM, jobs from applicant management: Astro fetches them directly via [API integrations](https://www.360vier.de/en/data-enablement/api-integrations/), and WordPress does not have to store them. 

 ![](https://www.360vier.de/wp-content/uploads/dataenablement-api-datenautomation-onlight-360vier.svg) 

### **Readable for AI**

 Clean HTML and structured data make content easy to understand for search engines and AI assistants. More under [AI-First Websites](https://www.360vier.de/en/digital-platforms/ai-first-websites/). 

## Switching WordPress to headless step by step

An existing WordPress website does not have to go headless all at once. We start with the section that gains the most, such as campaign pages, a magazine or the product range. This part comes from Astro, while the rest keeps running in the classic theme. Both share content, navigation and design.

This way you see after a few weeks what changes in loading time and maintenance, and then decide on the next section. The page [Website relaunch with WordPress](https://www.360vier.de/en/digital-platforms/website-relaunch/) describes how we plan larger changeovers.

![](https://www.360vier.de/wp-content/uploads/wordpress-enterprise-plattform-entwicklung-modular-skalierbar-4.webp)

## WordPress as a headless CMS: what matters

Headless moves tasks that WordPress otherwise handles itself into the frontend. We plan these points from the start; the technical foundations are described on the page [WordPress architecture](https://www.360vier.de/en/digital-platforms/wordpress-architecture/).

 ![](https://www.360vier.de/wp-content/uploads/integrationen-manuell-nacharbeit-onlight-360vier.svg) 

### **Preview for editors**

 Before publication, drafts appear in the Astro frontend exactly as they will look live, not just in the editor. 

 ![](https://www.360vier.de/wp-content/uploads/integrationen-kontext-onlight-360vier.svg) 

### **Gutenberg blocks**

 Every block gets an Astro component. New blocks are created in both worlds at the same time, so the editor and the website match. 

 ![](https://www.360vier.de/wp-content/uploads/integrationen-marketing-ohne-feedback-onlight-360vier.svg) 

### **Forms**

 Form plugins do not output a frontend in headless mode. We connect them via their interface or build them as a component connected to the CRM. 

 ![](https://www.360vier.de/wp-content/uploads/integrationen-medienbruch-onlight-360vier.svg) 

### **SEO with Rank Math**

 The frontend takes over titles, descriptions, canonicals and structured data from Rank Math via the plugin’s headless interface. 

 ![](https://www.360vier.de/wp-content/uploads/integrationen-reporting-blinde-flecken-onlight-360vier.svg) 

### **REST API or WPGraphQL**

 The REST API is built into WordPress. WPGraphQL pays off when pages need many linked pieces of content in a single query. 

 ![](https://www.360vier.de/wp-content/uploads/dataenablement-api-datenautomation-onlight-360vier.svg) 

### **Multilingual content**

 Language versions from WPML flow into the frontend together with their hreflang links, so that Google serves the right version. 

## Headless or classic WordPress?

### Headless pays off if …

- loading time measurably affects rankings and conversion,
- your IT does not want the WordPress backend to be publicly accessible,
- content should also appear in apps, portals or on screens,
- several data sources come together in one website.

### Classic is better if …

- the editorial team uses many plugins that output their own frontend,
- the website is manageable in size and already loads quickly,
- there is no budget for operating a second system.

Classic WordPress projects are described on the page [WordPress agency](https://www.360vier.de/en/digital-platforms/wordpress-agency/). For new platforms without an existing WordPress setup, we also consider [Payload CMS](https://www.360vier.de/en/digital-platforms/payload-cms-agency/). If the website is becoming more of an application with logins and data, we recommend [AI software development with React and Supabase](https://www.360vier.de/en/ai-enablement/ai-software-development/). In detail on costs, preview and deployment: [Benefits of headless WordPress for companies](https://www.360vier.de/en/insights/cms/headless-wordpress/).

## Migrating to headless with Astro: the process

What ongoing operation includes is described on the page [WordPress maintenance and support](https://www.360vier.de/en/digital-platforms/wordpress-agency/wordpress-maintenance/).

## Frequently asked questions about headless WordPress

     What is headless WordPress? WordPress serves only as the editorial system and delivers content via an interface. A separate frontend generates the visible website, in our case usually Astro. Editing and presentation are thus separated.

 

    What is Astro? Astro is an open-source framework for content-driven websites. It generates pages as finished HTML and loads JavaScript only for interactive parts, so-called islands. Components from React, Vue or Svelte can be integrated, and content comes from files or a CMS such as WordPress.

 

    Why Astro and not Next.js? For content-driven websites, Astro delivers HTML without unnecessary JavaScript by default and therefore stays very fast. We use Next.js when the website is more of an application, with many login areas and interactive features.

 

    Can we keep our existing WordPress website? Yes. Backend, content, users and media stay. What is new is the frontend. We can also switch only individual sections and leave the rest in the classic theme.

 

  

 

     What happens to our plugins? Plugins that only work in the backend, for example for editing, translation or SEO, keep running. Plugins that output something in the frontend, such as forms or sliders, are replaced by components or connected via their interface.

 

    Is headless WordPress good for SEO? Yes, if metadata, structured data, sitemaps and redirects are carried over properly. The faster loading time helps as well. Without this work, you lose rankings, which is why it is part of our projects.

 

    What does headless WordPress cost? More than a classic WordPress website, because frontend and backend are built and operated separately. How much depends on the number of blocks, languages and interfaces. Migrating step by step spreads the costs over time.

 

    Where is the Astro frontend hosted? Static pages can be delivered on almost any infrastructure, for example via a CDN. For server-rendered pages, we use platforms such as Vercel or servers in Germany, depending on your IT’s requirements.

 

  

 

 ![Hans Mengler](https://www.360vier.de/wp-content/uploads/hans-mengler-team-360vier.webp)## Talk to us about your project

 

Hans Mengler

Managing Director

 

 [ Email Hans    ](mailto:beratung@360vier.de) [ Get in touch    ](https://www.360vier.de/en/inquiry/)