Headless WordPress is een architectuur waarbij WordPress alleen als content management systeem (CMS) en content API dient, terwijl het publieke frontend met een aparte technologie stack wordt gebouwd. De klassieke theme laag (PHP, template hierarchy, jQuery) wordt verwijderd of genegeerd en de frontend applicatie haalt content op via de WordPress REST API (sinds WordPress 4.7, december 2016) of via een GraphQL endpoint van het WPGraphQL plugin (meer dan 60.000 actieve installaties in 2025). Populaire frameworks: Next.js (React, van Vercel), Astro, Nuxt (Vue), SvelteKit, Gatsby, Remix, Eleventy, Hugo. Het frontend wordt apart gedeployed, vaak als statische HTML op een CDN (Vercel, Netlify, Cloudflare Pages, AWS Amplify) of als server side gerenderd Node.js op de edge. Drijvers zijn snellere laadtijden, betere Core Web Vitals, moderne developer experience en multi channel publishing.
Verschil met klassiek WordPress
- Bezoeker opent
https://shop.example.nl. - Frontend roept
https://cms.example.nl/wp-json/wp/v2/posts. - WordPress geeft JSON terug.
- Frontend rendert en stuurt HTML plus klein JS bundle.
Welke APIs?
| API | Formaat | Voordeel | Nadeel |
|---|---|---|---|
| WordPress REST API | JSON | Ingebouwd | Meerdere round trips |
| WPGraphQL | GraphQL | Alleen benodigde velden | Plugin, HTTP cache lastig |
Voordelen
- Performance.
- Betere Core Web Vitals.
- Moderne dev experience.
- Kleiner aanvalsoppervlak.
- Multi channel.
- Schalen via ISR.
- Editor ongewijzigd.
Nadelen
- Hogere kosten.
- WYSIWYG preview kapot.
- HTML injectie plugins kapot.
- SEO handmatig.
- Build tijd langer.
- Comments en formulieren custom.
- React developers duurder.
Populaire frameworks
- Next.js, Astro, Nuxt, SvelteKit, Gatsby, Eleventy, Remix.
Hosting
- Backend: Kinsta, WP Engine, Cloudways. Plannen: WP Engine Atlas, Kinsta Headless, Pantheon Decoupled.
- Frontend: Vercel, Netlify, Cloudflare Pages, AWS Amplify, Render, Railway, Fly.io.
Voorbeeld met Next.js en WPGraphQL
async function getPosts() {
const res = await fetch('https://cms.example.nl/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: `{ posts(first: 10) { nodes { title slug } } }` }),
next: { revalidate: 60 },
});
return (await res.json()).data.posts.nodes;
}Wanneer NIET kiezen voor Headless
- Kleine sites zonder performance probleem.
- Team zonder React/Vue.
- Afhankelijkheid van page builders.
- Veel HTML injectie plugins.
- WooCommerce met complexe checkout.
SEO
SSR of SSG. Mappen van title, meta description, canonical, Open Graph, Twitter Card, sitemap, robots.txt en JSON-LD.
Hoe helpt InspectWP?
InspectWP herkent CDNs aan headers x-vercel-id, x-nf-request-id, cf-ray.