Naar hoofdinhoud

InsightsDevelopment

Wat is een headless CMS? Uitleg, voorbeelden en wanneer je ervoor kiest

Een headless CMS haalt de plek waar je inhoud beheert los van de plek waar bezoekers die inhoud zien. Dat klinkt als een technisch detail, maar het bepaalt wat je site kan, wat hij kost en wie hem daarna onderhoudt.

· Design & Development · · bijgewerkt · 7 min lezen

Kort antwoord

Wat is een headless CMS? Een systeem om inhoud te beheren zonder vaste voorkant. Teksten, beelden en pagina's staan in een beheeromgeving, en een API levert ze aan een website, een app of een ander kanaal. Hoe de pagina eruitziet bepaalt het CMS niet: dat doet een aparte voorkant, die een ontwikkelaar bouwt.

Wat is een headless CMS?

Een CMS, een content management system, is de plek waar je de inhoud van je site beheert. Bij een traditioneel CMS zit de voorkant er vast aan: het systeem bewaart je teksten én bouwt de pagina op die de bezoeker ziet. Bij een headless CMS is die voorkant, het "hoofd", eraf gehaald. Het systeem beheert alleen de inhoud en geeft die via een API door aan wat erom vraagt.

In drie lagen ziet dat er zo uit:

Laag Wat het doet Voorbeeld
Beheeromgeving hier schrijft en wijzigt de redactie teksten, beelden en pagina's het beheerpaneel van Payload op /admin
API geeft de inhoud door als gegevens, meestal in JSON REST of GraphQL
Voorkant haalt de gegevens op en maakt er een pagina van een Next.js website

Wie vraagt wat is headless, krijgt dus een antwoord over de voorkant die ontbreekt, niet over iets wat je als redactie mist. Je vult nog steeds velden in en je drukt nog steeds op publiceren. Het verschil zit erachter: de inhoud staat als gegevens klaar, en een website, een app of een scherm in een winkel kan diezelfde gegevens ophalen. Storyblok omschrijft het in zijn eigen uitleg als het scheiden van het maken van inhoud en de presentatie, met API's ertussen.

Dat heeft een gevolg dat je als opdrachtgever merkt: beheer en voorkant zijn twee aparte delen. Bij de meeste headless systemen hebben ze elk hun eigen code, hosting en updates. Bij Payload kunnen ze in één Next.js-project draaien, met het beheer op /admin van hetzelfde domein.

Het verschil met een traditioneel CMS zoals WordPress

In een standaard WordPress-installatie zitten beheer en voorkant in één pakket. Je kiest een thema, WordPress bouwt de pagina zelf op en de redactie ziet in de editor ongeveer wat de bezoeker straks ziet. Bij headless zijn dat twee losse onderdelen, en dat verandert vijf dingen.

Traditioneel CMS, zoals WordPress Headless CMS
De voorkant zit in het CMS, via een thema apart gebouwd, bijvoorbeeld in Next.js
Kanalen vooral de eigen website website, app en andere kanalen uit dezelfde bron
Uitbreiden plugins uit een grote bibliotheek functies worden gebouwd of via een koppeling aangesloten
Wie de opmaak wijzigt de redactie, binnen de grenzen van het thema een ontwikkelaar; de redactie vult de velden
Wat van buiten bereikbaar is beheer en publieke site draaien op dezelfde installatie de publieke site kan los van de beheeromgeving draaien

Geen van beide is beter. Een traditioneel CMS is sneller opgezet en geeft de redactie meer vrijheid. Headless geeft de ontwikkelaar meer vrijheid en de redactie een vaster kader.

Voorbeelden van een headless CMS

Er zijn er tientallen. Deze vijf kom je het vaakst tegen. Ze verschillen vooral in waar ze draaien: op je eigen hosting of als dienst van de leverancier.

Payload

Open source, geschreven in TypeScript en gebouwd op Next.js, met een beheerpaneel dat uit je eigen inrichting wordt opgebouwd en een database als Postgres of MongoDB. Het draait waar jij het neerzet. Dit is wat wij gebruiken voor een website op Payload CMS.

Storyblok

Een headless CMS als dienst, volledig beheerd in de cloud, met een visuele editor waarin de redactie de pagina ziet terwijl ze hem bewerkt.

Strapi

Een open source CMS met een uitbreidbaar beheerpaneel en rechten per rol, dat inhoud levert via REST en, met een plugin, GraphQL.

Contentful

Een clouddienst waarvan de Content Delivery API de inhoud als JSON uitlevert via een wereldwijd verspreid CDN.

Sanity

Inhoud staat als gestructureerde gegevens in de gehoste Content Lake, en de beheeromgeving Sanity Studio is open source en met React aan te passen.

Headless WordPress: WordPress zonder voorkant

Headless WordPress betekent dat je WordPress houdt als beheeromgeving, maar de voorkant apart bouwt. WordPress heeft daar een REST API voor. Volgens de eigen documentatie kan elke programmeertaal die HTTP-verzoeken doet en JSON leest daarmee met WordPress praten. De redactie blijft in het vertrouwde scherm werken, en de bezoeker krijgt een site te zien die in Next.js of een ander framework is gebouwd.

Wij zien dat vooral als tussenstap. Het werkt als er jaren aan inhoud in WordPress staat en de redactie daar niet weg wil, terwijl de voorkant sneller moet of een ontwerp krijgt dat niet in een thema past. De keerzijde is dat je twee systemen onderhoudt. En een deel van wat WordPress aantrekkelijk maakt valt weg: een plugin die iets op de pagina toont, zoals een formulier of een slider, werkt niet meer vanzelf, omdat WordPress de pagina niet meer opbouwt.

Voordelen en nadelen van headless

Een headless website bestaat altijd uit die twee delen, beheer en voorkant, en daar komen zowel de voordelen als de nadelen vandaan.

De voordelen:

  • Snelheid. De voorkant kan vooraf of op de server worden opgebouwd en haalt alleen de gegevens op die hij nodig heeft. Hoe je dat meet en wat het oplevert staat in het artikel over snelheid.
  • Veiligheid. De beheeromgeving kán los van de publieke site draaien, en dan is er van buitenaf minder te bereiken. Bij Payload draait hij meestal in hetzelfde project, dus daar geldt dit niet vanzelf.
  • Kanalen. Dezelfde inhoud gaat naar een website, een app of een ander scherm, zonder dat iemand hem twee keer invoert.
  • Vrijheid in het ontwerp. Er is geen thema als uitgangspunt, dus de site hoeft niet te lijken op duizend andere.

De nadelen:

  • Kosten. Twee delen bouwen is meer werk dan een thema inrichten. Hoe dat doorwerkt in de prijs lees je in wat een website kost.
  • Afhankelijk van een ontwikkelaar. Een nieuw soort sectie of een andere opmaak vraagt code. De redactie vult in, maar verbouwt het ontwerp niet zelf.
  • Geen pluginwinkel. Wat erbij moet, wordt gebouwd of gekoppeld. Bij WordPress bestaat er soms een plugin voor.
  • Zien wat je bewerkt. In WordPress zie je de pagina in de editor. Bij headless moet een voorbeeldweergave worden ingericht. Payload heeft daar een live preview voor, Storyblok een visuele editor.

Wanneer kies je voor een headless CMS?

Niet op basis van de omvang van je bedrijf of je branche. Deze vier vragen geven meestal de doorslag:

  1. Moet de site gegevens tonen uit een ander systeem? Aanbod uit een makelaarspakket, voorraad uit een ERP, beschikbaarheid uit een planning. Dan is een API aan beide kanten een voordeel.
  2. Gaat dezelfde inhoud naar meer dan één kanaal? Een website en een app, of een website en schermen in een winkel.
  3. Telt laadtijd zwaar mee? Bijvoorbeeld omdat je veel betaald verkeer naar de site stuurt en elke seconde wachten bezoekers kost.
  4. Is er iemand die de techniek bijhoudt? Headless zonder ontwikkelaar achter de hand is een risico.

Twee keer ja op de eerste drie vragen en ja op de vierde: dan is headless het overwegen waard. Staat de site vooral op zichzelf, publiceer je vooral artikelen en wil de redactie zelf met de opmaak kunnen schuiven, dan ben je met WordPress meestal beter af.

Wat is een headless CMS dus in één zin? Een beheeromgeving die inhoud levert en de voorkant overlaat aan wie hem bouwt. Of dat bij jouw site past, is een vraag over koppelingen, kanalen en onderhoud, niet over techniek. Wat wij bouwen staat op Design & Development.

Veelgestelde vragen

Wat betekent headless?

Headless betekent letterlijk zonder hoofd. In software gaat het om een systeem zonder eigen voorkant: het beheert gegevens en geeft ze via een API door, maar bepaalt niet hoe ze op een scherm verschijnen. Bij een CMS betekent het dat een ontwikkelaar die voorkant apart bouwt, als website, app of ander kanaal.

Wat zijn voorbeelden van CMS?

WordPress is het bekendste traditionele CMS: beheer en voorkant zitten in één pakket. Voorbeelden van een headless CMS zijn Payload, Storyblok, Strapi, Contentful en Sanity. Die beheren alleen de inhoud en leveren die via een API aan een voorkant. Welke past, hangt af van waar het moet draaien en wie het onderhoudt.

Is WordPress een headless CMS?

Niet standaard. Een gewone WordPress-installatie bouwt de pagina zelf op via een thema en is dus een traditioneel CMS. Via de REST API kun je WordPress wel headless gebruiken: WordPress blijft dan de beheeromgeving, en een apart gebouwde voorkant, bijvoorbeeld in Next.js, haalt de inhoud op en toont hem aan de bezoeker.

Waar staat CMS voor?

CMS staat voor content management system: software waarmee je de inhoud van een website beheert zonder zelf code te schrijven. Je maakt pagina's aan, wijzigt teksten en plaatst beelden in een beheeromgeving. Bij een traditioneel CMS bouwt het systeem ook de pagina op, bij headless doet een aparte voorkant dat.

Bronnen

Portret van Jos van der Pluijm tussen de stellingen van een magazijnVragen hierover?Mail Josjos@klubb.nl

Let’s work together.

Wil je weten hoe dit voor jouw business uitpakt? Plan 30 minuten met Daan of Jos.