wat is een headless cms

Wat is een headless CMS?

20 juli 2022


By: Gijs Boddeus


6 min. reading time

De afgelopen jaren zijn er een hoop technologieën en platform bij gekomen. Ze zijn allemaal gemaakt om aparte gedeeltes van e-commerce en web development te versimpelen. Zo wordt de term headless vooral gelinkt aan een CMS (Content Management System), maar kan dus ook worden ingezet voor e-commerce.

Wat betekent headless?

De term headless is vrij duidelijk: zonder hoofd. Een headless CMS is dus een CMS zonder hoofd of gezicht. Het enige dat je er mee kan is content beheren en uitlezen. Je bent helemaal vrij om te doen met je content waar en hoe je maar wil. Zo kun je dezelfde content zowel in een app gebruiken als op je site. De voorkant en de achterkant worden dus gescheiden van elkaar en kun je uitwisselen.

De manier waarop dit gedaan wordt is op basis van API's. Via deze API's kun je je content raadplegen en in je applicatie of site gebruiken. Hierdoor hebben de developers van de voorkant meer vrijheid in welke technologie ze gebruiken om de website of webwinkel te maken.

Traditionele e-commerce platformen, waaronder het huidige Afosto platform, maken de keuze voor je. De taal waarin je webwinkel moet bouwen is dan al voor je gekozen. Je zal dus deze taal moeten leren en je bent beperkt in plugins die je kan installeren.

Waarom is headless beter?

Doordat de developers vrij zijn in hoe ze de voorkant bouwen kunnen ze gebruik maken van de nieuwste technieken. Neem een voorbeeld aan de site waar je je nu op bevindt. Afosto.com is gebouwd met Strapi, een populaire open source headless CMS. Hierin beheren wij onze pagina's, blogs en menu's. De site zelf is gemaakt in GatsbyJS, een veel gebruikte Static Site Generator (SSG). De makers van Gatsby hebben alle moderne technieken en best practices van het web samengevoegd in één platform. Hierdoor kun je supersnelle websites maken die hoog scoren voor pagespeed. Als je afosto.com test met Lighthouse (de techniek achter Google's Pagespeed Insights), zul je zien dat alle meters groen zijn.  volledige rapport

Omdat de content dus los staat van de site zelf, zouden we Gatsby ook kunnen vervangen voor een ander platform. Wij gebruiken bij Afosto voor de voorkant ReactJS, omdat GatsbyJS hier ook gebruik van maakt was dit voor ons snel te leren. Een ander veel gebruikt framework is VueJS. Hiervoor is ook een SSG gemaakt genaamd Gridsome. Je hebt dus vrije keus in techniek en CMS.

Wat is headless e-commerce?

De CMS is dus verantwoordelijk voor de content, maar daarmee ben je er nog niet voor een webwinkel. Je producten moeten natuurlijk ook een plek hebben (PIM), je klanten moeten worden geregistreerd (CRM) en er moet een winkelwagen bijgehouden worden. Er zijn tegenwoordig voor elk onderdeel aparte platformen gemaakt die gespecialiseerd zijn in bijvoorbeeld product beheer of order beheer. Dit geeft je de vrijheid om het platform te kiezen die dat onderdeel het beste aan jouw wensen voldoet. Veel traditionele e-commerce platformen bieden alles in een aan, zogenaamde monolith. Daarbij is de voorkant en achterkant in elkaar verweven. Met headless geeft de voorkant alleen maar opdrachten aan de achterkant om bijvoorbeeld een order bij te werken. Lees deze blog om meer te weten te komen over headless commerce.

Afosto & Headless

Afosto heeft een eigen CMS systeem met daarnaast een hagelnieuw order management systeemwarehouse management systeem en een fulfilment oplossing voor het beheren en afhandelen van je bestellingen. Dit systeem is gebouwd op basis van tientallen jaren ervaring in de snel ontwikkelende wereld van E-commerce. Headless is een ontwikkeling van de laatste jaren die we op nauwe voet volgen en waarmee we momenteel aan het experimenteren zijn met een aantal van onze klanten. Ook benieuwd naar de mogelijkheden om samen te werken met Afosto? Bekijk dan de verschillende mogelijkheden op de site of vraag een demo aan!

Headless vrij vertaald "zonder hoofd" betekend dat de voorkant en achterkant van een website, app of digitale oplossing los van elkaar opereren en alleen d.m.v. API's met elkaar verbonden zijn. Hierdoor staat de backend (content) los van de frontend (het design) van een website.

Het verschil tussen een traditioneel CMS (Content Management System) en een headless CMS is dat bij een traditioneel CMS de backend en frontend van de website met elkaar verweven zijn. Bij een headless CMS zijn deze onderdelen van elkaar gescheiden dit zorgt voor enorm veel vrijheid in hoe je bijvoorbeeld producten kunt tonen op je website, instore scherm of app.

Met een headless CMS kun je ook verschillende backend oplossingen koppelen aan 1 frontend, dit zorgt voor vrijheid in keuzes voor oplossingen die het beste aansluiten bij jouw specifieke situatie.

Het headless CMS is verantwoordelijk voor de content maar om een webwinkel te runnen heb je meer nodig dan dat: Je producten moeten beheert worden, je klantdata moet ergens worden opgeslagen en de webshop orders moeten ergens beheert en afgehandeld kunnen worden. Door voor een headless oplossing te kiezen sta je er vrij in om hier verschillende API-first systemen voor te gebruiken in combinatie met een headless CMS. Deze vrijheid zorgt ervoor dat je een zogenoemde "best of breed" oplossing kan maken specifiek voor jouw situatie.