Wat is een headless CMS? Betekenis, werking en voordelen
Een headless CMS scheidt je content van de voorkant van je site. Lees hoe het werkt, de voor- en nadelen en het verschil met een traditioneel CMS.
Een headless CMS is een contentmanagementsysteem zonder vaste voorkant. Je beheert er je teksten, afbeeldingen en andere content in, en een API levert die content aan je website, je app of elk ander scherm. Hoe de content eruitziet, bepaalt de frontend die je daar zelf voor bouwt.
Headless betekent letterlijk "zonder hoofd". Het hoofd is de presentatielaag: de templates en pagina's die je bezoeker ziet. Hieronder lees je hoe een headless CMS werkt, wat het verschil is met een traditioneel en een decoupled CMS, wat de voor- en nadelen zijn en wat je nog meer nodig hebt als je er een webshop op bouwt.
Wat betekent headless?
Headless is een keuze in de opbouw van software: het systeem dat de gegevens beheert, staat los van het systeem dat ze toont. De twee praten met elkaar via een API, een vaste afspraak over hoe het ene programma gegevens opvraagt bij het andere en wat het terugkrijgt (MDN Web Docs).
Een CMS (content management system) is software waarmee je content maakt, beheert en publiceert zonder zelf code te schrijven (MDN Web Docs). Wat is headless CMS dan precies? Een CMS dat alleen die beheerkant levert, zonder thema's of paginatemplates. De content gaat als gestructureerde data naar buiten, en elke voorkant haalt op wat hij nodig heeft.
Headless buiten het CMS: browser, applicatie en webshop
Je komt het woord ook buiten het CMS tegen, steeds met dezelfde betekenis: er hoort geen eigen scherm bij.
- Een headless browser draait zonder zichtbaar venster. Ontwikkelaars testen websites bijvoorbeeld automatisch met de headless modus van Chrome.
- Een headless applicatie of server heeft geen eigen gebruikersinterface. Je bedient hem via een API of de opdrachtregel, en andere software bouwt de schermen.
- Headless e-commerce past hetzelfde idee toe op een webshop. Daarover lees je verderop meer.
Hoe werkt een headless CMS?
Een headless CMS werkt in drie stappen. Neem als voorbeeld een winteractie die je op je website, in je app en op een scherm in je winkel wilt laten zien.
1. Je legt content vast als bouwstenen
In het CMS maak je geen pagina, maar een item met vaste velden: een titel, een korte tekst, een afbeelding, een knoptekst en een einddatum. Samen heten die velden het contentmodel. Het model zegt wat de content is, niet waar hij komt te staan.
2. De frontend vraagt de content op via een API
De website, de app en het winkelscherm sturen elk een verzoek naar de API van het CMS. Dat is meestal een REST-API of een GraphQL-API. Het antwoord bestaat uit data, vaak in JSON, zonder opmaak.
3. Elke voorkant toont de content op zijn eigen manier
De website zet de actie als brede banner op de homepage, de app als kaart in de feed en het winkelscherm als groot beeld met alleen de titel. Pas je de tekst aan in het CMS, dan tonen alle drie de nieuwe versie zodra ze de content opnieuw ophalen.
De frontend bouwen developers in een framework naar keuze, zoals Next.js, Nuxt, Astro of SvelteKit. Afosto.com werkt zelf ook zo. De pagina's en blogs staan in een eigen contentsysteem, los van de website. De website is een Next.js-app die de content via een API uit dat systeem ophaalt.
Content modeling: denk in bouwstenen, niet in pagina's
Het contentmodel bepaalt hoe bruikbaar je headless CMS later is. Drie vuistregels helpen:
- Beschrijf wat iets is, niet hoe het eruitziet. Een veld "korte samenvatting" werkt op elk scherm. Een veld "tekst linkerkolom" werkt alleen op die ene pagina.
- Leg vertalingen per veld vast. Een vertaler ziet dan welke velden in zijn taal nog leeg staan, en je publiceert per taal.
- Spreek rollen en een goedkeuringsstap af. Wie schrijft, wie controleert en wie publiceert? Die content governance telt zwaarder zodra meer kanalen dezelfde content gebruiken.
Wat is het verschil tussen een headless CMS en een traditioneel CMS?
In een traditioneel CMS zitten beheer en weergave in één systeem. Je kiest een thema, bouwt pagina's in een editor en het CMS stuurt kant-en-klare HTML naar de bezoeker. WordPress is het bekendste voorbeeld, en veel webshopplatforms werken op dezelfde manier met een thema of een eigen templatetaal.
Een headless CMS levert alleen de content. De weergave bouw je zelf, met één frontend voor alles of met een aparte frontend per kanaal. Het verschil tussen CMS en headless CMS zit dus niet in het beheren van content, maar in wie de pagina opbouwt: het CMS zelf of jouw eigen frontend.
Wat is een decoupled CMS?
Een decoupled CMS zit ertussenin. Beheer en weergave draaien los van elkaar, maar het CMS levert wel een eigen voorkant mee, plus een API voor andere kanalen. Je begint dan met de meegeleverde templates en sluit later een app of een eigen frontend aan op dezelfde content.
| Traditioneel CMS | Decoupled CMS | Headless CMS | |
|---|---|---|---|
| Voorkant | Ingebouwd, via thema's | Ingebouwd, plus een API | Geen, die bouw je zelf |
| Content naar andere kanalen | Beperkt, vaak via plug-ins | Via de API | Via de API, daar is hij voor bedoeld |
| Wie bouwt de pagina's | De redacteur in de editor | De redacteur, plus een developer voor extra kanalen | Een developer bouwt de templates, de redacteur vult de content |
| Past bij | Eén website, een klein team | Een website plus een of twee extra kanalen | Meerdere kanalen, eigen developers of een bureau |
Voordelen en nadelen van een headless CMS
Headless pakt niet voor iedereen beter uit: je ruilt kant-en-klaar gemak in voor vrijheid. Dit zijn de belangrijkste voordelen van een headless CMS, en wat ertegenover staat.
Voordelen
-
Eén bron voor elk kanaal. Je schrijft een tekst één keer en toont hem op je website, in je app, in een nieuwsbrief of op een scherm in de winkel.
-
Vrije keuze in techniek. Developers kiezen het framework dat bij het project past. Wil je later een nieuwe voorkant, dan vervang je die zonder je content opnieuw in te voeren.
-
Een snelle site ligt binnen bereik. Moderne frameworks bouwen pagina's vooraf of op de server op. Hoe snel je site wordt, hangt dan vooral af van hoe je de frontend bouwt.
-
Een kleiner aanvalsoppervlak. Het beheerdeel hoeft niet op het domein van je website te draaien. Bezoekers komen alleen bij de frontend en bij de API die de content uitlevert.
-
Teams werken naast elkaar. Redacteuren vullen content terwijl developers aan de voorkant bouwen, zonder op elkaar te wachten.
Nadelen
-
Je hebt developers nodig. Zonder frontend heb je geen website, en elke nieuwe soort pagina vraagt ontwikkelwerk.
-
Minder direct zicht op het resultaat. Een redacteur ziet niet altijd hoe een tekst er op de site uitkomt, tenzij iemand een preview heeft gebouwd.
-
Meer onderdelen om te beheren. CMS, frontend, hosting en koppelingen zijn losse systemen, elk met eigen kosten en updates. Meer daarover lees je in de blog over de kosten van een headless CMS.
-
SEO ligt bij de frontend. Titels, meta-descriptions, structured data en redirects regelt de frontend, niet het CMS. Google kan JavaScript renderen, maar noemt server-side rendering of pre-rendering nog steeds een goed idee: dat maakt je site sneller voor gebruikers en crawlers, en niet elke bot voert JavaScript uit (Google Search Central).
Wat is headless e-commerce?
Een headless CMS beheert content, maar een webshop heeft meer nodig: producten met prijzen en voorraad, een winkelwagen, een checkout, klantaccounts en orderbeheer. Bij headless e-commerce, ook headless commerce genoemd, draaien die functies op een commerceplatform met een API. De winkel die je klant ziet, bouw je zelf.
Het tegenovergestelde heet een monolith: één systeem waarin voorkant en achterkant met elkaar verweven zijn. In een headless opzet komt alles in de frontend samen. Een productpagina haalt de productgegevens uit het PIM, de prijs en de voorraad uit het commerceplatform en een merkverhaal uit het CMS. Hoe dat werkt en wanneer het loont, lees je in de blog over headless commerce.
Een headless webshop op Afosto
Voor retailers en groothandels zit de uitdaging zelden in de content zelf, maar in alles daarachter. Verkoop je in een winkel, via een webshop en op marktplaatsen, dan moeten prijzen, voorraad en orders op elk kanaal kloppen. Een los CMS, een losse checkout en een los orderbeheer achter je frontend betekenen koppelingen die je zelf bijhoudt.
Op Afosto draaien CMS, PIM, checkout en orderbeheer op hetzelfde platform. Per webshop kies je hoe de voorkant werkt:
- Gehost. De storefront draait op je eigen domein. Je bouwt pagina's in de template builder of met je favoriete AI-tool via de Afosto MCP.
- Headless. Je bouwt een eigen frontend met de Storefront JavaScript Client. Die geeft je kant-en-klare GraphQL-query's en -mutaties voor winkelwagen, checkout en orders, en werkt met een storefront-token dat bij één verkoopkanaal hoort. Ook de checkout en de mijn-account-omgeving, waar je klant zijn orders en adressen ziet, kunnen headless.
Bouw je een headless webshop naast een winkel of groothandel? In een demo laten we zien hoe frontend, checkout, voorraad en orders op Afosto samenkomen, afgestemd op jouw kanalen. Plan een demo.
Webshoporders komen zo in het Afosto-orderbeheer terecht, naast de orders uit je andere kanalen. Een voorbeeld is DiamondsByMe. Afosto bouwde samen met DiamondsByMe een Next.js-website op de commerce-backend van Afosto, met headless checkout, Instant Search en een PIM op maat voor meer dan 1 miljoen productvariaties. Vanuit één backend lopen er 18 verkoopkanalen.
Wat er bij een headless webshop op Afosto komt kijken, van de Storefront JavaScript Client tot de gehoste checkout, lees je op de productpagina.
Wanneer kies je een headless CMS?
Een headless CMS loont als je dezelfde content op meer dan één plek toont, of als de templates van je huidige systeem je tegenhouden. Heb je één eenvoudige website en een klein team zonder developer, dan is een traditioneel CMS vaak praktischer. Je staat sneller live en hoeft geen eigen frontend te onderhouden.
Waar let je op bij de keuze?
Een headless CMS vergelijken doe je op vijf punten:
- Contentmodel: kun je eigen velden, herbruikbare blokken en verwijzingen tussen items maken?
- API: biedt het systeem REST, GraphQL of allebei, en welke limieten gelden er?
- Redactie: is er een preview, kun je content inplannen en kun je rollen en goedkeuring instellen?
- Talen: vertaal je per veld, en kun je per taal of per kanaal publiceren?
- Kosten: tel licentie, hosting, gebruikers en de bouw van de frontend bij elkaar op.
Headless website laten maken: wat heb je nodig?
Voor een headless website heb je drie dingen nodig: een headless CMS, een frontend en hosting voor die frontend. Een headless CMS zelf bouwen hoeft bijna nooit, want er bestaan genoeg kant-en-klare systemen, als dienst of als open source. De frontend bouwt een eigen developer of een bureau.
Reken op meer bouwwerk vooraf dan bij een thema, en op meer vrijheid daarna. Spreek ook af wie de frontend onderhoudt. Het CMS werkt je content bij, maar je templates, je hosting en je SEO-instellingen blijven werk voor je eigen team of bureau.
Al je kanalen vanuit één plek
Orders, voorraad, kassa en verzending in één systeem.
Maak gratis accountPlan een demoVeelgestelde vragen
Wat is het verschil tussen een CMS en een headless CMS?
Een traditioneel CMS beheert je content en bouwt ook de pagina's die je bezoeker ziet, met thema's en templates. Een headless CMS doet alleen het eerste: je beheert er content in, en een API levert die content aan elke website, app of ander scherm. De voorkant bouw je zelf. Dat geeft meer vrijheid en één bron voor meerdere kanalen, maar je hebt er developers voor nodig.
Is WordPress een headless CMS?
Standaard niet. WordPress is een traditioneel CMS: beheer, thema's en de website zitten in één systeem. WordPress heeft wel een REST-API, waarmee je de content ook headless kunt gebruiken. Je bouwt dan een eigen frontend, bijvoorbeeld met Next.js, die berichten en pagina's via die API ophaalt. Het WordPress-thema gebruik je in die opzet niet meer, en plug-ins die iets op de voorkant tonen, moet je in je eigen frontend opnieuw inbouwen.
Is een headless CMS goed voor SEO?
Dat hangt af van de frontend, niet van het CMS. Een headless CMS levert alleen content. Titels, meta-descriptions, structured data, redirects en de snelheid van je pagina's regel je in de frontend. Google kan JavaScript renderen, maar noemt server-side rendering of pre-rendering nog steeds een goed idee. Bouw je de frontend zo, en geef je redacteuren velden voor titel en description, dan staat een headless site er voor SEO goed voor.
Heb je een developer nodig voor een headless CMS?
Ja, in elk geval om te beginnen. Een headless CMS heeft geen thema's, dus iemand moet de frontend bouwen die de content toont. Dat doet een eigen developer of een bureau. Daarna vullen redacteuren de content zelf in het CMS, zonder code. Een nieuwe soort pagina of een nieuw kanaal vraagt wel weer ontwikkelwerk. Heb je geen developer, dan past een traditioneel CMS of een gehoste webshop vaak beter.
Wat kost een headless CMS?
Meer dan alleen de licentie. Reken met de prijs van het CMS zelf, die vaak afhangt van het aantal gebruikers, de hoeveelheid content of het aantal API-verzoeken. Daar komen de bouw van de frontend, hosting voor die frontend en onderhoud bij. Open-source systemen hebben geen licentiekosten, wel kosten voor hosting en beheer. Zet alle posten voor de komende drie jaar op een rij, zodat je systemen eerlijk vergelijkt.
Hoe stap je over naar een headless CMS?
Begin met een inventaris van je content en ontwerp daarna het contentmodel: welke soorten items heb je en welke velden horen erbij? Zet de content over met een import of via de API van het nieuwe CMS, en bouw tegelijk de frontend. Houd je URL's gelijk, of zet een 301-redirect van elke oude URL naar de nieuwe. Ga pas live als titels, descriptions en redirects kloppen.