Context: waarom Verf.nl koos voor headless
Verf.nl is een actieve Nederlandse e-commerce winkel in de verfbranche. De bestaande architectuur was een traditionele, gekoppelde setup waarbij frontend en backend als één geheel draaiden. Dat leverde beperkingen op voor snelheid, flexibiliteit en personalisatie — drie zaken die in e-commerce direct de omzet beïnvloeden.
Bij headless e-commerce worden de frontend (wat de bezoeker ziet) en de commerce engine (orders, producten, prijzen, betalingen) volledig losgekoppeld. Ze communiceren via een API. Dit geeft vrijheid om de beste technologie per laag te kiezen en om de frontend volledig te optimaliseren voor snelheid en UX — onafhankelijk van de beperkingen van het platform.
De keuze voor BigCommerce als commerce engine, Directus als CMS en Nuxt als frontend was bewust: BigCommerce biedt robuuste B2B-features en een stabiele API; Directus geeft redacteuren een flexibele content-omgeving; Nuxt zorgt voor server-side rendering en daarmee maximale laadsnelheid en SEO.
De gefaseerde aanpak: waarom niet alles tegelijk?
Een volledige "big bang" migratie — alles tegelijk omzetten — is voor een actieve e-commerce omgeving te risicovol. Downtime of fouten betekenen directe omzetschade. De gekozen aanpak was gefaseerd: onderdeel voor onderdeel vervangen, terwijl de webshop volledig operationeel bleef. Bezoekers merkten niets van de vernieuwing; de uitstraling bleef gelijk terwijl de techniek volledig werd vernieuwd.
Kernprincipe gefaseerde migratie
Bij elke fase: de nieuwe component draait parallel aan de oude totdat hij volledig getest en stabiel is. Dan pas schakelt de live omgeving over. Nul downtime, geen zichtbare verandering voor de klant tijdens de transitie.
Dit model — gefaseerde headless migratie — is de meest betrouwbare aanpak voor e-commerce bedrijven die niet maanden kunnen wachten op een volledig nieuwe site. De voordelen: continue inkomsten, stapsgewijs testen, en de mogelijkheid om bij te sturen na elke fase.
De drie fasen van de Verf.nl transitie
De transitie werd opgedeeld in drie opeenvolgende fasen, elke keer startend bij de pagina's met het hoogste technische én commerciële belang.
Productpagina's
De productpagina's waren de eerste fase: hoge traffic, directe conversie-impact en de technisch meest complexe component door de integratie van de Colortool. Klanten kunnen op de vernieuwde pagina's eenvoudig kleurcombinaties ontdekken en sneller het juiste product vinden.
Homepage en contentpagina's
In de tweede fase werden de homepage en contentpagina's omgezet naar modulaire blokken die via Directus beheert worden. Redacteuren kunnen pagina's flexibel opbouwen en aanpassen zonder developer-tussenkomst. Per campagne of doel kan de pagina-opbouw en uitstraling verschillen.
Categoriepagina's
De categoriepagina's — het hart van de product discovery — kregen slimme filters, een duidelijke structuur en de meest waardevolle nieuwe feature: ingelogde klanten zien automatisch hun persoonlijke contractprijzen. Dit was technisch niet mogelijk in de oude architectuur.
De tech stack in detail
Elke laag van de headless architectuur heeft een duidelijke, afgebakende verantwoordelijkheid. Dat is precies het punt van headless: elke component kan worden vervangen, geüpgraded of uitgebreid zonder de rest aan te raken.
BigCommerce
Commerce engineBeheert alle commerce-data: producten, prijzen, klantgroepen, bestellingen en betalingen. De BigCommerce API levert data aan de Nuxt frontend via server-side rendering. BigCommerce B2B Edition maakt klantgroep-specifieke prijzen mogelijk.
Directus
CMSContent management systeem voor alle niet-commerce content: campagnepagina's, blogartikelen, banners en modulaire pagina-blokken. Redacteuren werken in een gebruiksvriendelijke interface, volledig los van de frontend-code.
Nuxt (Vue.js)
FrontendServer-side rendering framework dat data van BigCommerce en Directus combineert tot snelle, goed-indexeerbare pagina's. SSR zorgt voor korte Time-to-First-Byte en volledige crawler-toegankelijkheid — beide cruciaal voor SEO.
REST API / Webhooks
IntegratielaagBigCommerce en Directus communiceren via REST API's met de Nuxt frontend. Realtime updates (prijswijzigingen, nieuwe producten) worden via webhooks of on-demand revalidation verwerkt zonder volledige site-rebuild.
Resultaten na de transitie
Na de gefaseerde headless transitie zijn drie typen verbeteringen zichtbaar: technische prestaties, zoekmachinevindbaarbeid en personalisatie-mogelijkheden.
Snellere laadtijden
Server-side rendering met Nuxt zorgt voor kortere Time-to-First-Byte. Snellere pagina's verlagen het bouncepercentage en verbeteren Google-rankings.
Betere indexeerbaarheid
SSR-gegenereerde HTML is volledig leesbaar voor zoekmachines. In de oude client-side setup was indexering afhankelijk van JavaScript-rendering.
Persoonlijke prijzen voor B2B
Ingelogde klanten zien automatisch hun contractprijzen op categoriepagina's. Technisch mogelijk door BigCommerce customer groups te koppelen aan de Nuxt frontend.
Nul downtime tijdens transitie
De gefaseerde aanpak garandeerde volledige operationele continuïteit. Bezoekers merkten niets van de technische vernieuwing.
Onafhankelijke frontend-ontwikkeling
Frontend en backend zijn nu volledig gescheiden. Nieuwe features aan de frontend hoeven de commerce engine niet aan te raken.
Flexibele contentbeheer via Directus
Redacteuren kunnen zelfstandig pagina's bouwen, campagnes inrichten en content aanpassen zonder developer-tussenkomst.
Belangrijk: De gepersonaliseerde prijsweergave voor ingelogde klanten was technisch niet haalbaar in de oude monolithische setup. Headless maakte dit mogelijk door de frontend los te koppelen van de commerce engine en klantspecifieke data via de BigCommerce API op te halen.
Lessen en aanbevelingen
Elke headless transitie levert inzichten op die je vooraf niet kunt plannen. Dit zijn de vijf meest waardevolle lessen uit de Verf.nl aanpak.
Begin bij de pagina's met het hoogste business-impact
Productpagina's hadden de grootste effect op conversie en de meeste technische complexiteit. Door daar te beginnen, worden de grootste winsten het snelst gerealiseerd en leer je meteen de moeilijkste integraties kennen.
Plan de CMS-structuur vroeg, niet laat
Directus als CMS vereiste dat de content-structuur vooraf goed doordacht werd. Achteraf aanpassen van content-types kost meer tijd dan vooraf goed nadenken.
Zorg voor een robuuste caching-strategie van dag één
SSR-gegenereerde pagina's met dynamische data (klantprijzen, voorraden) vereisen een zorgvuldige cache-strategie. Te agressief cachen leidt tot verouderde data; te weinig cachen vertraagt de site.
Test klantgroep-specifieke features uitvoerig
Persoonlijke prijzen zijn eenvoudig te implementeren maar moeilijk te testen: je hebt meerdere testaccounts per klantgroep nodig en edge cases zijn talrijk. Plan hier meer tijd voor in.
Documenteer de API-mapping grondig
BigCommerce en Directus hebben elk hun eigen data-model. De mapping tussen beide systemen en de frontend moet goed gedocumenteerd zijn voor toekomstige developers.
Is headless de juiste keuze voor jouw webshop?
Headless is niet voor iedereen de beste aanpak. De Verf.nl situatie had kenmerken die headless rechtvaardigen: hoog verkeer waarbij laadsnelheid conversie beïnvloedt, behoefte aan B2B-personalisatie (klantprijzen), en een bestaand team dat frontend en backend onafhankelijk van elkaar wil ontwikkelen.
Kies headless als je:
- Laadsnelheid direct conversie beïnvloedt
- Klantspecifieke prijzen of personalisatie nodig zijn
- Je meerdere kanalen bedient (web, app, kiosk)
- Je content en commerce onafhankelijk wilt beheren
- Je een sterke frontend-ervaring nastreeft die een template-systeem niet biedt
Blijf traditioneel als:
- Je snel wilt starten met een beperkt budget
- Je catalogus eenvoudig en stabiel is
- Je geen frontend-developers beschikbaar hebt
- Personalisatie of multi-channel geen vereiste zijn
Meer over wanneer headless de juiste keuze is en wat de kosten zijn: zie de complete headless e-commerce gids.