Hydrogen is Shopify's eigen headless framework. Het belooft snelheid en vrijheid. Maar de ontwikkelkosten liggen 2-3x hoger dan een standaard thema. Dit is wanneer het de moeite waard is.
Shopify Headless met Hydrogen: wanneer wel, wanneer niet
Een standaard Shopify-thema kost €5.000-€15.000 om te bouwen. Een Hydrogen-implementatie kost €20.000-€60.000. Dat is geen typefout.
Die drie tot vier keer hogere investering is de eerste vraag die je moet beantwoorden: rechtvaardigt mijn situatie dat verschil?
Dit artikel helpt je die vraag eerlijk te beantwoorden.
Wat is headless? En wat is Hydrogen?
Headless e-commerce betekent dat je frontend (wat de klant ziet) is losgekoppeld van je backend (de data, logica en checkout). Je gebruikt Shopify's backend via een API, maar bouwt je eigen frontend in een modern JavaScript-framework.
Hydrogen is Shopify's eigen framework voor headless storefronts. Het is gebouwd op React en Remix. Shopify lanceerde het in 2022, en het heeft sindsdien meerdere grote updates gehad. Hydrogen integreert nauw met Shopify's Storefront API en Oxygen — Shopify's eigen hosting voor headless storefronts.
De alternatieve route is een custom headless frontend in Next.js of Astro, die ook de Shopify Storefront API aanroept. Hydrogen heeft als voordeel dat het nauwer aansluit op Shopify's eigen tooling.
Wat belooft headless? En wat levert het echt?
De beloftes
Snelheid: Headless-implementaties met goede server-side rendering (SSR) en streaming kunnen Lighthouse-scores van 95-100 halen op mobile. Vrijheid: Je bouwt je eigen UX. Geen thema-beperkingen. Geen Shopify-layout-structuur. Volledig maatwerk. Integraties: Je kunt meerdere backends aansturen. Shopify voor commerce, maar een extern CMS zoals Contentful voor content, een aparte zoekprovider als Algolia. Internationale schaalbaarheid: Eigen routing per land, eigen hreflang-implementatie, totale controle over je URL-structuur.De realiteit
Snelheid is alleen beter als je het goed bouwt. Een slecht gebouwde Hydrogen-store kan langzamer zijn dan een goed geoptimaliseerd Shopify-thema.
Vrijheid betekent ook verantwoordelijkheid. Geen thema-updates, geen out-of-the-box oplossingen. Elke feature bouw je zelf, of je integreert een externe service.
Integraties worden complexer. Elk systeem heeft een eigen API. Consistentie bewaken over al die systemen vereist een sterke architectuur.
Ontwikkelkosten: de echte getallen
Shopify standaard thema (Liquid)
| Component | Kosten |
|---|---|
| Thema (Prestige, Impulse, of custom) | €350-€2.000 (licentie) |
| Aanpassingen en maatwerk | €5.000-€15.000 |
| Integraties (apps) | €0-€5.000 |
| Totaal | €5.350-€22.000 |
Shopify Headless met Hydrogen
| Component | Kosten |
|---|---|
| Architectuurontwerp | €3.000-€8.000 |
| Frontend development (Hydrogen/React) | €15.000-€40.000 |
| Shopify Storefront API-integratie | €3.000-€8.000 |
| CMS-integratie (optioneel) | €3.000-€10.000 |
| Performance-optimalisatie en testing | €3.000-€8.000 |
| Totaal | €27.000-€74.000 |
Onderhoud is ook hoger. Een Liquid-thema vereist gemiddeld 2-4 uur per maand. Een Hydrogen-implementatie vereist 6-15 uur per maand — meer als je externe services integreert.
Wanneer heeft Hydrogen zin?
Hydrogen is een goede keuze als je aan meerdere van deze criteria voldoet:
1. Je omzet rechtvaardigt de investering.Reken op minimaal €5 miljoen jaaromzet voordat Hydrogen ROI oplevert. Onder die grens is de investering moeilijk te rechtvaardigen.
2. Je hebt een unieke UX die niet past in een standaard thema.Complexe productconfiguratoren, gepersonaliseerde experiences op basis van klantdata, interactieve 3D-viewers — dat soort functionaliteit past niet in een Liquid-thema.
3. Je bent internationaal actief in meerdere markten.Hydrogen geeft je volledige controle over routing, hreflang, URL-structuur per markt. Bij 5+ landen loont die flexibiliteit.
4. Performance is een kritische businessfactor.Mode-brands met hoge retourneerpercentages weten dat snelheid de conversie beïnvloedt. Als elke milliseconde telt en je budget hebt om dat te onderbouwen met data, is headless te rechtvaardigen.
5. Je combineert meerdere backends.Shopify voor checkout, een extern PIM voor productdata, een extern CMS voor content. Als je architectuur meerdere systemen vereist, maakt een headless frontend die samenhang logisch.
Wanneer is Hydrogen overkill?
Hydrogen is te zwaar als:
- Je omzet onder de €5 miljoen zit
- Je productcatalogus eenvoudig is (minder dan 5.000 producten)
- Je UX geen bijzondere eisen stelt aan de frontend
- Je team geen React-developers heeft of wil aannemen
- Je snel live wilt gaan
De meeste Shopify-webshops vallen in deze categorie.
Het alternatief dat iedereen vergeet: een goed thema
Een premium thema als Prestige, Impulse of Galleria kost €350-€450. Met gerichte aanpassingen ben je €10.000-€20.000 verder. Je hebt een snel, professioneel uitziende winkel die out-of-the-box al Lighthouse 75+ haalt.
Voor 90% van de webshops is dit de juiste keuze.
De 10% die Hydrogen nodig heeft, weet het doorgaans al — want ze stoten op de beperkingen van een thema.
Hydrogen vs. Next.js Commerce: wat is het verschil?
Hydrogen is Shopify-specifiek. Als je altijd op Shopify blijft, is Hydrogen de logische keuze. De integratie met Shopify's Storefront API is dieper, de tooling is beter afgestemd.
Next.js Commerce (van Vercel) is platform-agnostisch. Je kunt dezelfde frontend later koppelen aan Magento, Shopify of een ander backend. Als je platform-flexibiliteit wilt, is Next.js Commerce interessanter.
Voor maatwerk bouwen wij ook frontends in combinatie met Laravel-backend logica, waarbij we Shopify als commerce-layer gebruiken en Laravel de complexe businesslogica beheert.
Hosting: Oxygen vs. Vercel
Shopify's eigen hosting voor Hydrogen is Oxygen. Voordelen: naadloze integratie, automatische deployments vanuit je GitHub-repository, wereldwijd CDN.
Vercel is het alternatief. Goede performance, maar je betaalt extra en de Shopify-integratie vereist wat meer configuratie.
Voor de meeste projecten adviseren wij Oxygen. Het vereenvoudigt de stack en verlaagt de beheerslast.
Praktische checklist: wel of niet headless?
Beantwoord deze vijf vragen:
- Is mijn jaaromzet boven de €5 miljoen?
- Heb ik unieke UX-eisen die niet passen in een thema?
- Ben ik actief in meer dan drie internationale markten?
- Heb ik (of kan ik aannemen) React-developers voor beheer?
- Is performance een gedocumenteerd business-probleem?
Drie of meer keer "ja"? Headless loont de overweging.
Twee of minder keer "ja"? Investeer in een goed thema. Je hebt grotere prioriteiten.
Twijfel je? Neem contact op. We geven je een eerlijk oordeel zonder commercieel belang.
Veelgestelde vragen
Hoe lang duurt het bouwen van een Hydrogen-implementatie?
Reken op 16-30 weken voor een volledige implementatie, inclusief architectuurontwerp, development, integraties en testing. Een standaard Shopify-thema met maatwerk: 6-12 weken.
Heeft Hydrogen een nadeel voor SEO vergeleken met een standaard thema?
Niet per definitie. Hydrogen met goede SSR presteert uitstekend voor zoekmachines. Maar slecht geconfigureerde client-side rendering in Hydrogen kan Google hinderen bij het indexeren. Dat is een implementatiekwestie, geen platformkwestie.
Wat zijn de lopende kosten van een Hydrogen-implementatie?
Rekening houdend met Oxygen-hosting, development-onderhoud (6-15 uur/maand) en externe diensten (Algolia, Contentful, enz.) schat je op €2.000-€5.000 per maand aan beheerkosten.
Kan ik later van een standaard thema naar Hydrogen migreren?
Ja. Veel webshops starten met een thema en migreren later naar headless als de businesscase sterker wordt. De data en checkout blijven in Shopify; alleen de frontend wordt herbouwd.
Werkt Hydrogen met Shopify's normale App Store apps?
Gedeeltelijk. Apps die via script-tags werken (chatwidgets, reviews) werken ook in Hydrogen. Apps die Liquid-templates aanpassen, werken niet. Dit is een belangrijk aandachtspunt bij het kiezen voor headless.
Geschreven door Ruthger Idema
15+ jaar ervaring in e-commerce development. Gespecialiseerd in Magento, Shopify en Laravel maatwerk.
Meer over ons team →