Headless WordPress betekent dat je WordPress alleen gebruikt als contentbeheersysteem, terwijl een losse frontend zoals Next.js of Astro de website toont aan bezoekers. De twee delen praten met elkaar via de WordPress REST API of GraphQL. Dit levert vaak snellere laadtijden, meer veiligheid en meer vrijheid in design op, maar vraagt wel wat meer technische kennis dan een klassieke WordPress-site. In dit artikel lees je wat headless WordPress precies inhoudt en hoe je het zelf opzet.
Wat is headless WordPress precies
Bij een traditionele WordPress-site genereert WordPress zelf de HTML die bezoekers te zien krijgen, via thema’s en templates. Bij headless WordPress knip je dat proces los: WordPress blijft verantwoordelijk voor het opslaan en beheren van content (pagina’s, berichten, media, custom fields), maar de weergave wordt overgenomen door een aparte frontend-applicatie. Die frontend haalt de content op via een API en bouwt daar zelf de pagina’s mee op.
Het resultaat is twee gescheiden systemen: een backend (WordPress, vaak bereikbaar via een eigen subdomein) voor contentbeheer, en een frontend (gebouwd met een framework als Next.js of Astro) die zichtbaar is voor bezoekers. Redacteuren werken nog gewoon in de vertrouwde WordPress-omgeving; ontwikkelaars bouwen de website los daarvan met moderne webtechnologie.
Waarom headless kiezen
Headless WordPress is niet voor elke site de beste keuze, maar in een aantal situaties levert het duidelijke voordelen op.
- Snelheid: de frontend genereert statische of zeer lichte pagina’s, zonder zware PHP-verwerking bij elk bezoek. Dat betekent kortere laadtijden en betere scores in snelheidstests.
- Veiligheid: doordat de WordPress-backend niet rechtstreeks zichtbaar is voor bezoekers, is het aanvalsoppervlak kleiner. Er is geen publiek thema dat kwetsbaar kan zijn.
- Design-vrijheid: je bent niet gebonden aan WordPress-thema’s en kunt elke gewenste interactie of animatie bouwen met moderne frontend-technologie.
- Schaalbaarheid: de frontend kan los van de backend geschaald worden, bijvoorbeeld via een CDN, wat handig is bij veel verkeer.
De keerzijde is dat je twee systemen moet onderhouden in plaats van één, en dat functies die in klassieke WordPress-thema’s standaard werken (zoals sommige plugins voor formulieren of zoekfunctionaliteit) zelf opnieuw gebouwd moeten worden in de frontend.
Next.js of Astro: wat past bij jou
Beide frameworks kunnen prima headless WordPress-content tonen, maar ze verschillen in aanpak.
Next.js is een React-framework dat goed is voor sites met veel interactiviteit, zoals webshops, dashboards of sites met inlogfunctionaliteit. Het ondersteunt zowel statisch genereren als server-side rendering, waardoor je per pagina kunt kiezen hoe content wordt opgebouwd.
Astro is gericht op content-gedreven sites zoals bedrijfswebsites, blogs en portfolio’s. Het stuurt standaard zo min mogelijk JavaScript naar de browser, wat vaak resulteert in nog snellere laadtijden dan Next.js voor dit type site. Interactieve onderdelen kun je toevoegen met zogeheten ‘islands’, zonder de rest van de pagina zwaarder te maken.
Vuistregel: kies Astro als je site vooral uit content bestaat met weinig interactie, kies Next.js als je veel dynamische functionaliteit nodig hebt.
Headless WordPress opzetten
Hieronder een praktisch stappenplan om headless WordPress met Next.js of Astro in te richten.
Richt een aparte WordPress-backend in
Installeer WordPress op een subdomein, bijvoorbeeld cms.jouwdomein.nl, en gebruik het alleen voor contentbeheer. Via Plesk kun je dit subdomein eenvoudig aanmaken en beheren naast je hoofddomein.
Activeer de API
De WordPress REST API is standaard actief. Wil je GraphQL gebruiken (vaak prettiger voor complexere queries), installeer dan een plugin die GraphQL-ondersteuning toevoegt aan WordPress.
Zet een Next.js- of Astro-project op
Maak een nieuw frontend-project aan en bouw pagina’s die content ophalen uit de WordPress-API. Richt sjablonen in voor paginatypes zoals berichten, pagina’s en eventuele custom post types.
Regel previews en herbouw-triggers
Zorg dat redacteuren een voorbeeld van hun concept kunnen zien, en stel een webhook in die de frontend automatisch laat herbouwen zodra content wordt gepubliceerd of gewijzigd.
Host beide onderdelen correct
Plaats de WordPress-backend op snelle hosting met NVMe-opslag en Plesk-beheer, en host de frontend op een omgeving die geschikt is voor Node.js-applicaties of statische bestanden. Regel voor beide onderdelen gratis SSL en dagelijkse backups, zodat content en code altijd veilig zijn.
Test en stel DNS in
Controleer of formulieren, zoekfunctionaliteit en afbeeldingen correct werken op de nieuwe frontend. Wijs daarna het hoofddomein toe aan de frontend en het subdomein aan de WordPress-backend, en controleer je domeinnamen en DNS-instellingen.
Loop je tegen configuratievragen aan rondom subdomeinen, SSL of serverinstellingen, dan vind je stapsgewijze uitleg in de kennisbank. Overweeg je om voor dit project over te stappen naar een andere hostingpartij, dan is het slim om vooraf te kijken hoe het overstappen naar Tandata verloopt, zodat je backend zonder downtime verhuist.
Veelgestelde vragen
Is headless WordPress geschikt voor elke website?
Nee. Voor eenvoudige bedrijfswebsites of blogs is klassiek WordPress vaak sneller op te zetten en te onderhouden. Headless WordPress loont vooral bij sites met hoge snelheidseisen, veel verkeer of complexe custom functionaliteit.
Werken WordPress-plugins nog in een headless opzet?
Plugins die content of data beheren (zoals SEO-plugins of custom fields) blijven werken, omdat ze data toevoegen aan de API. Plugins die frontend-output genereren, zoals sommige formulier- of slider-plugins, moet je vervangen door een eigen implementatie in de frontend.
Heb ik nog gewone webhosting nodig voor WordPress?
Ja, de WordPress-backend blijft draaien op een webserver, net als bij een klassieke site. Kijk bij webhosting naar een pakket met voldoende prestaties voor je contentbeheer.
Kan ik e-mail blijven gebruiken op hetzelfde domein?
Ja, e-mail staat los van hoe je website technisch is opgebouwd. Regel dit via zakelijke e-mail zodat je mailverkeer onafhankelijk blijft van je hosting- of frontendkeuze.
Is headless WordPress duurder dan klassieke WordPress?
Dat hangt af van de complexiteit van het project. Je betaalt mogelijk voor twee hostingomgevingen en meer ontwikkeltijd, maar bespaart vaak op onderhoud en kunt profiteren van betere prestaties op de lange termijn.
Conclusie
Headless WordPress scheidt contentbeheer van weergave, waardoor je met Next.js of Astro een snelle, veilige en flexibele frontend kunt bouwen bovenop de vertrouwde WordPress-backend. Het vraagt meer technische inrichting dan klassieke WordPress, maar levert op het gebied van snelheid en designvrijheid duidelijke voordelen op voor sites die daar behoefte aan hebben.