Headless of decoupled websites, wat zijn het? En waarom wil je het?

In tegenstelling tot een normale website is een headless of decoupled website ontworpen zonder een frontend-interface voor gebruikers. De achterkant van een website communiceert via een API met andere applicaties die de interface voor de gebruiker vormen. Dit kan verschillende voordelen opleveren, zoals flexibiliteit en gemakkelijke integratie met andere systemen. In dit artikel leg ik uit wat een headless of decoupled website is, wat de voordelen zijn en voor wie het geschikt is en wie niet.

Wat is een headless of decoupled website?

Stel dat een website een huis is. De verschillende pagina's en content op de website zijn als de kamers in het huis. Een decoupled of headless website is als een huis waarbij elke kamer zijn eigen verwarmings- en koelsysteem heeft. Elke kamer kan onafhankelijk worden geregeld, en de temperatuur kan naar elk gewenst niveau worden ingesteld zonder de temperatuur in de andere kamers te beïnvloeden.

Op dezelfde manier laat een decoupled of headless website verschillende delen van de website onafhankelijk van elkaar werken, zonder dat de andere delen hierdoor worden beïnvloed of afhankelijk zijn. Dit kan de website flexibeler en schaalbaarder maken, omdat wijzigingen aan een deel van de website niet noodzakelijkerwijs invloed hebben op de andere delen.

Wat is het verschil tussen headless en decoupled?

Een headless website is een website waarbij de frontend (wat de gebruiker ziet) en de backend (de server side logic en de database) gescheiden zijn. Dit betekent dat de frontend van de website geen rechtstreekse toegang heeft tot de back-end, maar in plaats daarvan via een API (Application Programming Interface) communiceert met de backend. De frontend van een headless website kan bijvoorbeeld worden gebouwd met HTML, CSS en JavaScript, terwijl de backend kan worden gebouwd met een server-side taal zoals PHP of Python.

Een decoupled website is een variant op een headless website, waarbij de frontend en de backend ook gescheiden zijn, maar de frontend kan worden gebouwd met een andere set van technologieën dan de backend. Bijvoorbeeld: de frontend kan worden gebouwd met een JavaScript-framework zoals React, terwijl de backend kan worden gebouwd met een server-side taal zoals PHP.
Denk bij een decoupled website bijvoorbeeld een backend-applicatie gevuld met producten. Bijvoorbeeld reiskoffers. Deze producten hebben velden als prijs, gewicht en type. De productinformatie wordt aangevuld en aangepast door de inkoopafdeling die alles van de producten weet.

De productinformatie wordt via een API verstuurd naar een e-commerce website, maar ook naar een informatiescherm op Schiphol en naar diverse webshops zoals bol.com zodat wijzigingen in de productinformatie direct zichtbaar zijn voor potentiële kopers.

Wat zijn de voordelen van een headless of decoupled website?

Het voordeel van een headless of decoupled website is dat de frontend en de backend onafhankelijk van elkaar kunnen worden ontwikkeld en onderhouden. Dit kan het ontwikkelproces versnellen en het gemakkelijker maken om nieuwe functionaliteiten toe te voegen aan de website. 

Bovendien kan een headless of decoupled website gemakkelijk worden aangesloten op andere applicaties en services via de API, wat het mogelijk maakt om gegevens te delen en te integreren met andere systemen.

Nog een voordeel is dat door de ontkoppeling van voor- en achterkant er een performancewinst ontstaat. Processen die aan de achterkant spelen, denk aan redacteuren die nieuwe content plaatsen of importprocessen die productinformatie ophalen of delen met externe applicaties, worden geregeld door de backend-applicatie. De frontend-applicatie houdt zich bezig met het bedienen van de bezoekers. Die ervaren hierdoor een snellere website of app. Daarnaast worden tegenwoordig steeds meer frontend-applicaties ontwikkeld met React / Next.js. Hierdoor wordt de website opgebouwd aan de kant van de bezoekers, waardoor de website niet alleen sneller voelt en oogt maar wat ook een gigantische besparing betekent voor de hostingkosten. Het is niet voor niets dat vrijwel alle grote apps en websites, zoals Whatsapp, Airbnb, Netflix en Paypal met React / Next.js worden ontwikkeld. 

Wat zijn de nadelen van headless of decoupled websites?

Elk voordeel heeft zijn nadeel. Een daarvan is dat de opzet voor iemand die technisch niet precies weet hoe websites werken complexer wordt. In plaats van een backend en frontend die samen de website vormen, zijn deze in een headless of decoupled opzet van elkaar gescheiden. Dat biedt bovenstaande voordelen maar kan ook voor uitdagingen zorgen. Waar staat welke data nu precies? Waarom kan iets wel in een frontend-applicatie maar niet in een backend-applicatie? Je moet als eigenaar of beheerder van deze applicaties begrijpen hoe de systemen met elkaar samenwerken.

Vandaar dat headless of decoupled websites eerder voorkomen bij organisaties die websites of applicaties in beheer hebben die geregeld doorontwikkeld worden, vaak gekoppeld zijn aan andere systemen en genoeg kennis en mankracht in huis is om de ontwikkeling en het beheer hiervan te begeleiden.

Conclusie

In conclusie biedt een headless website verschillende voordelen ten opzichte van een normale website. Doordat de website en de interface gescheiden zijn, kan de website snel worden verbeterd en aangepast aan veranderende behoeften zonder dat de gebruikersinterface daardoor wordt aangetast. Bovendien kan een headless website gemakkelijk worden geïntegreerd met andere applicaties en platforms, wat bijvoorbeeld handig kan zijn als je de website wilt koppelen aan bijvoorbeeld een mobiele app.