Headless CMS: wat is het en waarom is het de toekomst?

De tijd dat we allemaal in Microsoft Frontpage de HTML-code van onze website moesten aanpassen ligt gelukkig al een tijdje achter ons en intussen weten de meeste mensen wel wat een CMS (content management system) is. Headless CMS, vaak in één adem vernoemd met microservices, is de nieuwste evolutie op vlak van websitebeheer. In deze blogpost gaan we dieper in op het wat, waarom en hoe van een headless CMS.

Mensen achter laptops

Wat is een headless CMS?

Bij traditionele CMS'en (denk aan WordPress, Drupal …) spreekt men van een 'coupled CMS'. Dat betekent dat de 'achterkant' van je website, waar je de inhoud beheert, in dezelfde codebase zit als de code die de website visueel aan de gebruiker toont ('de frontend').

De moderne tegenhanger van zo’n 'coupled CMS' is een 'headless CMS'. Het woord zegt het zelf: het 'hoofd' (de voorzijde van de website) ontbreekt. We gaan dadelijk dieper in op de voor- en nadelen van deze aanpak, maar de belangrijkste beweegreden van deze aanpak is om 'inhoud en inhoudelijk beheer' te scheiden van 'uitingsvorm'.

Centraal inhoudsbeheer voor meerdere platformen

Het CMS wordt dus echt een 'content management systeem' en wordt al wel eens vergeleken met het PIM-principe, product information management-systeem. Alle inhoud die relevant is in de organisatie wordt op een centrale plaats beheerd, en gebruikt door verschillende platformen zoals website, apps, in-store kiosks, voice assistants, … maar ook als bron voor offline kanalen zoals bijvoorbeeld brochures en ander drukwerk.

De 'templates' die je gebruikt om de layout van de site op te bouwen, worden ontwikkeld in een andere codebase en gaan net zoals de andere uitingsvormen de inhoud die weergegeven moet worden ophalen bij het CMS, met API’s & webservices.

Headless CMS infographic

a

De bezoeker merkt trouwens geen verschil tussen een 'coupled CMS' of een 'headless CMS'. Ook bij een headless CMS zal de website gewoon werken als een doodnormale website.

Bestaande platformen headless maken

De trend van een headless CMS, betekent dat we allemaal onze WordPress, Umbraco of Drupal moeten buitengooien? Gelukkig niet. Veel hangt af van wat je ambities zijn en hoe ver je wilt gaan. Mits een beperkt aantal ingrepen kan je je bestaande WordPress, Umbraco, Drupal en andere gekende CMS'en headless maken door de frontend-templates te ontkoppelen en de nodige REST API’s te voorzien.

Andere CMS'en, zoals bijvoorbeeld Episerver, kiezen volop voor de vlucht vooruit en pretenderen 'headless first' te zijn. Al dan niet met de mogelijkheid om daarnaast op de klassieke manier alsnog templates te integreren in de CMS-code.

Vaak wordt bij een headless structuur in één adem ook het woord 'microservices' genoemd. Het principe is hetzelfde: het zoveel mogelijk scheiden van data & logica enerzijds en layout/uiting anderzijds. Maar een microservices-architectuur gaat vaker over de integratie met een of meerdere externe databases/platformen (denk ERP, CRM …).

Wanneer en waarom (niet) kiezen voor een headless aanpak?

Wanneer en waarom moet je nu kiezen voor een headless CMS-architectuur en niet voor een klassieke 'coupled CMS'-architectuur?

1. Zodra je meerdere (online) kanalen hebt (denk aan een app, kiosk in de winkel, voice assistants, …), is het gebruik van een headless CMS meer dan het overwegen waard. Je wilt immers dat wanneer je inhoud toevoegt of aanpast op de website, deze info ook onmiddellijk beschikbaar is op je andere kanalen. Kies je er voor om je website te voorzien van PWA-ondersteuning (https://www.intracto.com/nl-be/technologie/progressive-webapps)? Dan maakt het gebruik van microservices met een headless CMS-architectuur het werk ook heel wat eenvoudiger.

2. Een ander scenario is wanneer je besluit de frontend van je website te bouwen als JavaScript-applicatie, een 'single-page application' of SPA, denk React, Vue.js, Angular … Een single-page application is een webapplicatie of website die een vlotte gebruikservaring biedt, en geen pagina’s herlaadt tijdens het gebruik. Facebook is waarschijnlijk het bekendste voorbeeld

Met een SPA kan je bijna niet anders dan te werken met een headless opzet, omdat de uitwisseling van data veel soepeler kan verlopen dan met een klassieke opzet. Tevens biedt het ook voordelen voor performantie, schaalbaarheid en voor het ontwikkelproces. Je kan bijvoorbeeld meerdere backends koppelen aan een SPA.

3. Is ook (hyper-)personalisatie van de inhoud op je website een ambitie? Ook dan kan een headless aanpak je heel wat kopzorgen vermijden.

Is je website echter een relatief eenvoudige website (categorie online visitekaartje om maar iets te zeggen), dan is de meerwaarde voor een headless CMS waarschijnlijk onbestaande.

Voordelen van een headless aanpak

  • Centraal contentbeheer, ook al zijn er meerdere 'kanalen'. Dus, meer controle over de inhoud, en efficiënter werken.

  • Eenvoudiger om (de frontend van de) website te vervangen/vernieuwen zonder dat de hele backend vernieuwd moet worden (met de bijbehorende contentmigratie).

  • Vaak gebruikt bij e-commerce om productinformatie (al dan niet uit een PIM) te combineren met meer 'commerciële' informatie.

  • Performantie en schaalbaarheid van de website gaat omhoog. Gezien de gescheiden architectuur is het eenvoudiger om de frontend te spreiden over meerdere servers, te werken met load balancers en caching lagen, etc.

  • Eenvoudiger om 'design systems' te gebruiken en te integreren. Inhoudelijk beheer is niet afhankelijk van de lay-out, dus design wordt niet beperkt door de inhoud.

  • Onderhoudbaarheid en uitbreidbaarheid. Bij uitbreidingen of aanpassingen in de backend en/of frontend is het risico kleiner dat er bugs opduiken.

  • Samenwerking tussen twee partijen of twee teams gaat vlotter omdat frontend en backend twee gescheiden applicaties zijn.

  • ...

Aandachtspunten bij een headless aanpak

  • Impact op SEO. Een klassiek 'coupled' CMS heeft vaak een hele hoop SEO-functionaliteiten en -checks ingebouwd. Bij een headless CMS moet je deze inspanningen vaak zelf opnieuw toevoegen en/of koppelen. Er kruipt dus meer energie in om je website SEO-technisch op perfect niveau te krijgen.

  • Voor wie de klassieke manier van webmastering gewoon is, is het even aanpassen. Zowel qua inhoudelijke structuur (het concept 'pagina’s' komt op losse schroeven te staan) en knoeien in de templates via de backend of wat HTML-code in het CMS-veld knallen kan niet meer.

  • Design-systemen kunnen dan weer een hulpmiddel zijn om de layout van bepaalde inhoud te beïnvloeden. Ook hier is nadenken over structuur en opzet voor aanvang van het project van groot belang.

  • De opzet van de technische architectuur is meestal iets complexer. In het begin komt er ook iets meer overheadwerk, en dus kosten, bij kijken t.o.v. een klassiek CMS. Dit meerwerk betaalt zich echter op termijn snel terug door winst in efficiëntie.

Conclusie: meer efficiëntie met headless aanpak

De evolutie naar headless CMS-architecturen opent opnieuw heel wat mogelijkheden op digitaal vlak, en zorgt in de meeste gevallen sowieso voor efficiënter werken. Zowel op vlak van contentbeheer als op vlak van IT-technisch onderhoud en uitbreidbaarheid van het online ecosysteem.

Dit blog is geschreven door de specialisten van Intracto.

Inmiddels is Intracto onderdeel van iO. Meer weten? Neem gerust contact op!

logo iO