Wat headless betekent voor een Magento-shop
Een klassieke Magento-installatie koppelt de front-end direct aan de backend. Luma of Hyva rendert server-side HTML via Magento's PHP-laag, inclusief alle business logic. Elke paginabezoek triggert Magento's volledige request-lifecycle: PHP bootstrap, layout rendering, block rendering, template rendering.
Bij een headless architectuur splits je die koppeling op. Magento draait als API-first backend. Het beheert:
- ▸Productcatalogus: attributen, categorieën, configurable en grouped products
- ▸Ordermanagement: checkout-flow, orderstatus, retouren
- ▸Voorraadbeheer: MSI-bronnen, salable qty per warehouse
- ▸Klantaccounts: orderhistorie, adressen, wishlist
- ▸Promoties en prijsregels: catalogus- en cart-rules
- ▸Betaalintegraties: Mollie, Stripe en andere via Magento payment providers
De Next.js frontend haalt data op via de Magento GraphQL API en rendert de storefront als statische of server-rendered React-pagina's. Bezoekers zien nooit Magento's PHP-laag. Ze zien HTML die in milliseconden is gegenereerd via Next.js Server Components of edge-rendering.
Wanneer headless zin heeft voor jouw Magento-shop
Headless is geen standaard keuze. Het voegt complexiteit toe in de architectuur, en die complexiteit moet iets opleveren. De volgende situaties rechtvaardigen die investering:
- ▸LCP-plafond op de klassieke storefront: Luma-shops raken op mobiel regelmatig 8 tot 14 seconden PSI lab-LCP. Hyva haalt dat naar 3 tot 5 seconden. Next.js op Magento GraphQL haalt 0,6 tot 1,2 seconden in CrUX voor productpagina's met goed opgezette image-prioritering.
- ▸Multi-channel zonder Adobe Commerce licentie: je wilt dezelfde catalogus serveren via een webshop, een mobile app en een B2B-portaal. Met Magento als API-backend heb je één datalaag voor alle kanalen, zonder Commerce-licentie.
- ▸Team met React-expertise: je frontend-developers werken dagelijks in React. Ze zijn productiever in Next.js dan in Magento's template-systeem, LESS en RequireJS.
- ▸Design-vrijheid buiten Hyva: Hyva is snel, maar het blijft een Magento-theme. Als het ontwerp sterk afwijkt van wat een theme aankan, is headless de kortere weg.
- ▸PWA Studio te complex bevonden: Magento's eigen PWA Studio heeft een steile leercurve en beperkt community-support. Next.js is vertrouwder voor de meeste React-developers.
Het gaat niet om trendgevoeligheid. Het gaat om of de complexiteit van een headless architectuur iets concreets oplevert voor jouw specifieke situatie.
Wanneer headless geen goede keuze is
Ik adviseer headless niet aan iedereen. Er zijn situaties waar het meer kost dan het oplevert:
- ✕Kleine catalogus met minder dan 500 producten: Hyva Themes haalt hier al uitstekende performance. De extra architectuurlaag voegt geen zichtbare waarde toe voor de bezoeker.
- ✕Geen frontend-development capaciteit: een headless storefront vereist ongoing frontend-onderhoud door developers die React en Next.js kennen. Zonder dat team wordt onderhoud een bottleneck.
- ✕Payment-providers die hard koppelen aan de Magento-storefront: sommige payment-providers integreren via Magento-modules die directe toegang vereisen tot de PHP-frontend. Dat is te omzeilen, maar vraagt extra werk per provider.
- ✕Kleine budgetten zonder groeipad: headless migraties zijn substantieel. Als de businesscase niet duidelijk is, is een Hyva-migratie vaak de betere eerste stap.
- ✕Magento-functionaliteit die zwaar leunt op third-party modules met eigen frontend: extensies als Amasty Page Builder of custom checkout-modules zijn gebouwd voor de Magento-storefront. Die integreren niet vanzelf in een headless frontend.
Als ik twijfel of headless de juiste keuze is voor jouw situatie, zeg ik dat. Een architectuur-audit kost minder dan een migratie die halverwege vastloopt.
De architectuur die ik bouw
Voor headless Magento gebruik ik een vaste set keuzes, gebaseerd op wat in productie werkt:
- ▸Next.js App Router: Server Components voor statische en server-rendered pagina's, Client Components alleen waar interactie nodig is. Geen onnodige JavaScript naar de browser.
- ▸Magento GraphQL API: productcatalogus, categorienavigatie, cart-operaties, checkout, klantaccount en orderhistorie via de Magento GraphQL-laag. REST alleen waar GraphQL tekortschiet.
- ▸Algolia voor search (optioneel): Magento's ingebouwde catalogus-search schaalt niet goed bij grote catalogi. Algolia synchroniseert de catalogus en levert instant search met faceted filtering.
- ▸Mollie of Stripe via Magento order-API: betaling verloopt via de Magento-backend. Next.js stuurt de order naar Magento, Magento verwerkt de betaalprovider. De bezoeker ziet een React checkout-form, de betaling verloopt via de bestaande Magento payment provider.
- ▸ISR voor productpagina's: Incremental Static Regeneration voor productpagina's zorgt dat statische HTML beschikbaar is op de edge, zonder dat elke bezoeker een GraphQL-call triggert.
- ▸Cloudflare Workers voor verkeerssplitsing tijdens migratie: headless en classic draaien parallel, Cloudflare stuurt een configurable percentage verkeer naar de nieuwe frontend.
Elk van deze keuzes is bespreekbaar. Als je team een voorkeur heeft voor Elasticsearch over Algolia, of als je betalingsprovider een afwijkende integratie vereist, pas ik de architectuur aan.
Hoe de migratie verloopt
Headless migraties zijn riskant als ze in één keer live gaan. Ik gebruik een parallel deploy-strategie die downtime en risico minimaliseert.
De nieuwe Next.js frontend wordt opgebouwd naast de bestaande Magento-storefront. Beiden draaien op hetzelfde Magento 2 backend. Via een Cloudflare Worker regel ik verkeerssplitsing: eerst 5 procent van het verkeer naar de nieuwe frontend, dan 20 procent, dan 50 procent. Elke stap wordt gemonitord op conversie, foutpercentages en Core Web Vitals. Als een stap problemen laat zien, gaat het verkeer direct terug naar de classic storefront zonder dat bezoekers iets merken.
Na de harde cutover blijft de classic Magento-storefront nog aan staan als fallback. Pas na een stabiele periode, als alle edge-cases zijn gedicht, wordt de classic storefront uitgeschakeld. Het Magento Admin-panel, de extensies en het ordermanagement blijven de hele migratie onaangetast.
-- Anonieme klant-casus
8.000 producten, LCP-plafond op classic storefront, headless migratie
Een Magento 2 shop in de B2C-markt, 8.000 producten, Hyva theme, gehost op Hypernode. De LCP op mobiel stond in PSI lab op 7 tot 9 seconden voor categoriepagina's door zware filter-JavaScript en een LCP-afbeelding die pas laadde na de initialisatie van het filter-component.
Na de headless migratie naar Next.js App Router met Magento GraphQL en Algolia voor filtering: de categoriepagina's zijn statisch gegenereerd via ISR met een revalidatie per uur. Het filter-component is een Client Component, maar laadt na de LCP-afbeelding. De LCP-afbeelding krijgt fetchpriority=high en laadt server-side als prioriteit.
De Magento Admin bleef intact. Alle bestaande orders, klantaccounts en productdata bleven in Magento staan. Het frontend-team hoeft niet meer met Magento's template-systeem te werken; ze werken in Next.js en TypeScript. De Algolia-integratie verving de trage Magento layered navigation volledig.
Wat ik niet doe
Headless migraties worden soms als oplossing verkocht zonder dat de probleemdiagnose klopt. Ik doe het volgende niet:
- ✕Magento PWA Studio implementaties zonder gegronde reden: PWA Studio is Magento's eigen headless framework, maar het heeft een beperkt developer-ecosystem vergeleken met Next.js. Ik gebruik het alleen als het team er al mee werkt.
- ✕Headless zonder bredere architectuur-audit: een headless frontend op een slecht geconfigureerde Magento-backend lost de backend-problemen niet op. TTFB van 2 seconden op GraphQL-calls ondermijnt elke winst op de frontend.
- ✕Framework-keuze voor het klantteam beslissen: als jouw team werkt met Nuxt, Remix of een ander React-framework, ga ik niet beweren dat Next.js de enige juiste keuze is. Ik ga wel helder maken wat de trade-offs zijn.
- ✕Migraties zonder fallback-strategie: een headless migratie zonder parallel deploy is een onnodig risico. Ik bouw altijd een terugkeerpad.
Als een architectuur-keuze niet past bij jouw situatie, zeg ik dat direct. Een migratie die halverwege vastloopt kost meer dan de migratie zelf.
Scope en prijzen
De investering voor een headless Magento-migratie hangt af van de omvang van de catalogus, het aantal integraties, de complexiteit van de checkout en de beschikbaarheid van het klantteam voor samenwerking. Er is geen standaardpakket.
Ik werk op uurbasis of op basis van een vaste scope na een architectuur-sessie. Neem contact op om de situatie te bespreken.