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 zult 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 Prismic, een populaire open source headless CMS. Hierin beheren wij onze pagina's, blogs en menu's. De site zelf is gemaakt in Next.js, een veel gebruikt React framework voor het bouwen van websites of applicaties. De makers van Next.js hebben alle moderne technieken en best practices van het web samengevoegd in één framework. 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 Next.js ook kunnen vervangen door een ander platform. Wij gebruiken bij Afosto voor de voorkant ReactJS, omdat Next.js hier ook gebruik van maakt was dit voor ons snel te leren. Een ander veel gebruikt framework is VueJS. Hiervoor is een soortgelijk framework gemaakt genaamd Nuxt. Er zijn nog meer vergelijkbare frameworks om uit te kiezen, zoals Remix, Astro en SvelteKit. Je hebt dus vrije keus in techniek en CMS.
Wat is headless e-commerce?
Het 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 systeem, warehouse 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 maak een gratis account aan!
Schrijf u in voor onze nieuwsbrief en blijf op de hoogte van de nieuwste trends en ontwikkelingen in headless e-commerce. Ontvang inzichten, tips en updates over hoe Afosto's geavanceerde platform uw online verkoop kan verbeteren.
FAQ Headless CMS
Wat is headless?
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.
Wat is een headless CMS?
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.
Wat is headless e-commerce?
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.
Gijs is een toegewijde frontend developer bij Afosto, gespecialiseerd in het creëren van gebruiksvriendelijke interfaces met Next.js en React. Zijn expertise heeft in belangrijke mate bijgedragen aan de ontwikkeling en het succes van diverse winkels op het headless commerce platform van Afosto, waarbij hij een onderscheidende en efficiënte online aanwezigheid voor retailers waarborgt.
Meer van Gijs Boddeus