Bij een headless strategie bouwen we de front-end als onafhankelijke applicatie, die via een API data ophaalt van van de back-end. We gebruiken moderne JavaScript-frameworks (React, Next.js), die voor dit doel zijn ontworpen. Doordat we industriestandaard technologie gebruiken, en niet beperkt worden door de techniek van een ecommercesysteem, is er meer flexibiliteit en vrijheid. Daarbij halen we voordeel uit de innovaties die deze technologieën bieden; ze zijn geoptimaliseerd voor maximale snelheid en het bieden van een solide gebruikerservaring.
Een headless-strategie biedt aanzienlijke voordelen voor ecommerce vanwege de complexiteit die ecommerce van nature met zich meebrengt. De recente introductie van de GraphQL API in Magento en Adobe Commerce maakt headless e-commerce voor Magento mogelijk. We zijn vanaf een vroeg stadium betrokken geweest bij deze ontwikkeling en delen onze kennis via ons open source headless Magento frontend GraphCommerce.
Het scheiden van de frontend en backend maakt het voor ontwikkelaars eenvoudiger om nieuwe functionaliteit te ontwikkelen. Ze kunnen zich concentreren één aspect van de shop, zonder de andere te beïnvloeden. Daarnaast zijn de front-end technologieen die we gebruiken (React, Next.js) ontworpen voor projecten van grote schaal. Ze faciliteren op verschillende technische vlakken continuous development; iteratieve doorontwikkeling. Headless ecommerce betekent sneller reageren op veranderende marktomstandigheden en klantbehoeften en een kortere time-to-market van functionaliteit.
Door de hoge adoptiegraad van de moderne front-end technologieën die we gebruiken (React, Next.js) worden ze op hoog tempo doorontwikkeld. Elke versie biedt betere performance en meer funtionaliteit voor het moderne web. Voorbeelden hiervan zijn geavanceerde caching of afbeelding optimalisatie; core features die we niet project-specifiek hoeven te bouwen. We kunnen ons volledig concenteren op de requirements van het project, wat de snelheid van development en efficiëntie binnen het project bevorderd.
Een headless architectuur maakt dat de backend volledig kan worden ingericht voor efficiënte verwerking van data. De codebase hoeft niet te worden gecompliceerd met code (bijvoorbeeld modules) die frontend functionaliteit bevat. Dit resulteert in een lichtere en snellere back-end.
Elke up-to-date Magento 2 shop heeft een API. Gedurende het developmentproces is er geen interferentie met de bestaande live shop, want alle benodigde data kan via dit API-endpoint worden opgehaald. Hierdoor wordt het opstarten van de ontwikkeling van een headless storefront eenvoudig. Mocht voor een gewensde functionaliteit (bijvoorbeeld een product configurator) specifieke data nodig zijn, dan kan tijdens ontwikkeling worden gewerkt met mockup API-data. Het API-schema wordt afgestemd met het backend development team, waarna zij de ontwikkeling op hun eigen tempo kunnen uitvoeren.
Magento updates bevatten vaak breaking-changes met betrekking tot de front-end, zeker als de front-end veel maakwerk bevat. Met een afzonderlijke headless-frontend, wordt toekomstige upgrade inspanning tot de backend beperkt.
Een headless ecommerce frontend is een onafhankelijke applicat die met de backend communiceert via de API. Indien er interesse is om te migreren van Magento Open Source naar Adobe Commerce, of andersom, is de benodigde inspanning beperkt tot het compatible maken met de nieuwe backend. Er zijn geen wijzigingen aan de bestaande featureset vereist.
De headless storefront is een relatief lichte, zelfstandige applicatie die draait op een geoptimaliseerde hostinginfrastructuur. Deze serverless hosting schaalt afhankelijk van het huidige verkeer, waardoor headless ecommerce zich goed leent voor webshops met piekbelasting en drukke momenten. Dankzij de geoptimaliseerde prestaties van de frontend en geavanceerde cachingtechnieken, wordt een groot deel van de belasting op de backend opgevangen. Hierdoor kan de backend server in capaciteit worden teruggeschaald.