10 maart 2022


6 minuten lezen

Headless Commerce: uitgelegd in 5 minuten

Door Ton Koop

Je hebt waarschijnlijk al gehoord over headless commerce. Het is een van de meest besproken en minst begrepen trends in de huidige wereld van e-commerce. Om je te helpen dit beter te begrijpen zullen we met deze blog de belangrijkste kenmerken van een headless commerce systeem uitleggen. Daarnaast vertellen we je over de voordelen en overwegingen om voor headless te kiezen.

Wat is headless commerce?

De betekenis van headless commerce in de simpelste vorm is een scheiding tussen de frontend en de backend van een e-commerce oplossing. De frontend kan daardoor onafhankelijk van de backend opgebouwd worden. Je zit dus niet meer vast aan beperkingen van een backend systeem. Door voor headless commerce te kiezen heb je de vrijheid om een best-of-breed oplossing samen te stellen die het beste past bij jouw ambities.

Om het begrip headless te begrijpen is het belangrijk dat je scherp hebt wat het verschil is tussen frontend en backend.

Frontend: De frontend is de 'digitale winkel', ook wel de presentatielaag genoemd, waar de klant mee in aanraking komt. Dit is niet alleen een website, maar kan tegenwoordig zo ver gaan als social media, mobiele apps en de miljarden apparaten die we gebruiken in het Internet of Things (IoT). Denk bijvoorbeeld aan in-store schermen en voice technologie.

Backend: Alle systemen en hulpmiddelen die op de achtergrond draaien om de processen binnen jouw organisatie af te handelen. Deze systemen helpen je bij processen zoals order management, productbeheer, fulfillment, maar ook bij jouw marketing. Denk aan loyalty of CRM systemen.

Als je in de e-commerce zit weet je dat gelijke tred houden met opkomende trends niet eenvoudig is. COVID-19 heeft dit alleen maar meer in een stroomversnelling gebracht. De markt ontwikkelt zich nog sneller dan voorheen. In een traditioneel e-commerce systeem kan het creëren van nieuwe functionaliteiten updates van zowel het frontend als het backend systeem vereisen. Dit kan er voor zorgen dat zelfs kleine projecten tot enorme hoofdbrekens leiden.

Een kenmerk van headless is het gebruik API’s. De frontend en backend communiceren met elkaar door middel van API’s, net als de backend systemen onderling. Het scheiden van de front- en backend kan zorgen voor een snellere, aanpasbare en consistente winkelervaring. De backend voert nog steeds alle cruciale functies van een e-commerce oplossing uit, zonder daarvoor van een frontend (head) afhankelijk te zijn. Daarnaast zorgt de frontend voor het bieden van een optimale gebruikerservaring, zonder daarvoor afhankelijk te zijn van een backend.

Waar traditionele e-commerce platforms beperkend kunnen zijn met vormgeving en functionaliteit, geeft headless meer vrijheid om je frontend of "presentatielaag" aan te passen. Je kunt een prachtige, gedenkwaardige winkelervaring creëren - terwijl je bestaande backend intact blijft.

Headless commerce - frontend en backend gescheiden

Wat zijn de voordelen van headless commerce?

De twee kanten van een e-commerce systeem als afzonderlijke systemen laten werken heeft verschillende voordelen, zoals:

Pagina’s worden in milliseconden geladen waardoor mobiele conversie stijgt

Pagina’s in een headless structuur zijn niet meer afhankelijk van server-side input op het moment dat je ze bezoekt. Dat betekent dat een pagina minder vaak verbinding hoeft te leggen en dat de pagina al klaar staat op het moment dat de bezoeker komt. Dit zorgt voor een enorme verbetering in laadtijden wat jouw bezoekers erg zullen waarderen. En niet alleen bezoekers: ook zoekmachines zoals Google waarderen snellere webshops. Omdat Google wil dat mensen de meest relevante en beste ervaring krijgen na het gebruik van Google, krijgen snelle webshops een hogere positie in de zoekresultaten.

Een volledig flexibele en aanpasbare webshop

De commerce structuren zoals ze bij huidige systemen bestaan gelden niet meer. Een product toevoegen aan een winkelwagen gaat bijvoorbeeld volledig via API’s en zou zelfs vanaf een blog pagina kunnen gebeuren. Headless architectuur geeft je de flexibiliteit om te kiezen hoe je je frontend voor je verkoopkanalen wilt bouwen, in tegenstelling tot alleen de frontend technologie te gebruiken die door je commerce of CMS platform wordt geleverd.

Flexibiliteit om je content management of CMS in te richten zoals je wilt

Een headless oplossing kan bestaan uit een best of breed oplossing van systemen die gespecialiseerd zijn in hun eigen functies (bijvoorbeeld, Order Management, CMS, Zoeken, Betalen, Klanten, PIM, Media beheer). De gespecialiseerde backends hebben API’s waarmee het frontend kanaal aan kan haken en de voor dat kanaal gewenste klantervaring kan bieden. In het geval van een CMS kan een headless CMS er voor zorgen dat je voor elk type content het CMS kiest wat je zelf nodig acht.

Vereenvoudigd een omnichannel strategie

Headless architectuur helpt je je inhoud over verschillende platforms te verspreiden vanuit een enkele backend. Je bent minder tijd kwijt aan het leveren van dezelfde inhoud omdat het allemaal vanuit 1 systeem en 1 API geleverd kan worden.

Toekomstbestendig

Als jouw bedrijf prioriteit geeft aan technologische innovatie, dan is headless commerce iets voor jou. Om klaar te zijn voor de toekomst kiezen veel organisaties al vroeg voor een headless architectuur. Daardoor genieten ze van de lange-termijn efficiëntie die dit model oplevert om marktleider te blijven.

Headless commerce in de praktijk

Het kiezen voor headless betekent flexibiliteit in het kiezen van de techniek voor de voorkant van bijvoorbeeld je webshop. Voor onze klanten kiezen wij voor het gebruik van Next.js. Next.js is een toepassing van React (een modern framework) waarmee je moderne digitale (web)applicaties kan maken. Door middel van API’s halen wij de data naar de Next.js omgeving om dynamische sites te maken. Dit halen we uit moderne headless CMS systemen, zoals bijvoorbeeld Prismic of Builder.io.

De content uit de headless CMS systemen wordt gecombineerd met de commerce engine van Afosto. Zo halen we bijvoorbeeld prijzen uit de API van onze price group service en komt de voorraadstatus uit de API van ons WMS.

Naast het aanbieden van data dient onze commerce engine ook zorg te dragen voor het ontvangen van data. Denk bijvoorbeeld aan het toevoegen van een product aan de winkelwagen. Ook dit wordt via een API tussen de webshop en de Afosto order service afgehandeld. De prijs van het product wat wordt aangeboden hangt misschien af van of een klant is ingelogd of uit een bepaalde regio komt. Deze context van de order wordt naar de price rule engine gestuurd (je raadt het al, via een API) en deze engine geeft de juiste prijs voor het toegevoegde product in de gegeven context.

Zoals je al ziet wordt de gehele voorkant aangestuurd door API connecties welke losgekoppeld kunnen worden en eventueel vervangen door backend systemen die een bedrijfsproces wellicht beter afdekken.

Conclusie

In marketing is het tegenwoordig steeds belangrijker om te focussen op klantrelaties met inhoud en een positieve ervaring. Dit vereist een bepaalde mate van flexibliteit en wendbaarheid. Deze wendbaarheid zorgt ervoor dat je snel kan inspelen op veranderende klantvragen.

Headless e-commerce oplossingen stellen je in staat om je snel aan deze veranderingen aan te passen. Dit terwijl je een lagere total cost of ownership bereikt, een snellere time-to-market hebt, een betere beveiliging, en daarnaast alles wat je nodig hebt om een online winkelervaring van wereldklasse te bieden.

Als je meer wilt weten over hoe headless commerce gebruikt wordt om jouw klanten de beste ervaring te bieden, bekijk dan de Afosto headless commerce oplossing.

Vragen over Headless Commerce

Headless betekent een scheiding d.m.v. API’s tussen de frontend en de backend van een digitale oplossing. Het scheiden van de front- en back-end kan zorgen voor een snellere, beter aanpasbare en consistente winkelervaring.

Een headless CMS is een back-end content management systeem (CMS) dat puur gericht is op het beheren van content. Deze content wordt vervolgens beschikbaar gemaakt via een RESTful API of GraphQL API voor weergave op verschillende kanalen. Elk kanaal is een ‘head’ die volledig flexibel en uniek ingericht kan worden qua weergave.

Headless architectuur is een duidelijke scheiding tussen de interface en de backend van een systeem. De interface en backend kunnen onafhankelijk van elkaar ontwikkeld worden, zonder dat ze elkaar in een bepaalde structuur dwingen.

Geschreven door
Ton Koop

Mijn naam is Ton, mede-eigenaar van Afosto en in het bezit van een masterdiploma in International Business and Management. Bij Afosto fungeer ik als een stuwende kracht achter het ondernemerssucces van onze klanten. Mijn diepgaande expertise in e-commerce en mijn passie voor het uitbouwen van bedrijven zijn fundamenteel in mijn werkwijze om retailers te ondersteunen. Met het geavanceerde headless commerce platform van Afosto bied ik inventieve oplossingen die niet alleen de efficiëntie verhogen, maar ook de groei van bedrijven stimuleren. Ik hou er van om mijn kennis te delen zodat we samen succes kunnen hebben.

Meer van Ton Koop