Shopify Hydrogen of Next.js: welke headless stack past bij jouw merk?

Wat is Shopify Hydrogen, wat kost Oxygen en wanneer kies je Next.js? Zo kies je de juiste stack voor je headless Shopify webshop, met checklist.

In het kort: Shopify Hydrogen is Shopify's eigen React-framework voor een headless Shopify webshop. Headless betekent dat je de voorkant van je webshop zelf bouwt. Producten, winkelmand en checkout haal je via een API uit Shopify, in plaats van dat je een Shopify-theme gebruikt. Hydrogen draait op React Router en je host het zonder extra kosten op Oxygen, de hosting van Shopify. Next.js is een algemeen React-framework dat veel headless Shopify-sites gebruiken. Kies Hydrogen als bijna alles wat je verkoopt en publiceert in Shopify staat. Kies Next.js als je site ook een los CMS nodig heeft, data uit andere systemen of content voor meerdere landen.

Ik bouw headless Shopify-sites met Next.js, DatoCMS voor de content en Vercel voor de hosting. Met Hydrogen bouw ik niet. In dit artikel bespreek ik Hydrogen toch zo eerlijk mogelijk, ook de situaties waarin het de betere keuze is.

Wat is Shopify Hydrogen?

Met Hydrogen bouw je je eigen voorkant op Shopify, in plaats van een Liquid-theme te gebruiken. Shopify omschrijft Hydrogen-projecten als "React Router apps with a set of preconfigured options, bundled with a collection of Shopify-optimized components and utilities" (Shopify.dev). Oftewel: React Router-apps die al zijn ingericht voor Shopify, met kant-en-klare onderdelen.

In de praktijk krijg je:

• Een koppeling met de Storefront API, de API van Shopify voor producten, collecties en de winkelmand.
• Kant-en-klare hulpmiddelen voor winkelmand, SEO en analytics. Die hoef je dus niet zelf te schrijven.
• Caching voor je productdata. Sinds de developer preview van juli 2026 kun je elke Storefront API-query apart cachen op servers dicht bij de bezoeker (Hydrogen release notes).
• Een getypeerde koppeling met de Customer Account API, voor pagina's waarop klanten ingelogd zijn, zoals hun bestelgeschiedenis. Ook die kwam in de preview van juli 2026.
• Met één commando live zetten op Oxygen, de hosting van Shopify.

Hydrogen draaide eerst op Remix. Remix is inmiddels opgegaan in React Router, en de huidige versies van Hydrogen draaien op React Router 7 (Weaverse).

Wat is Oxygen en wat kost het?

Oxygen is de hosting van Shopify voor Hydrogen-sites. Shopify noemt het "Shopify's global deployment platform that's built for hosting Hydrogen storefronts at the edge": een wereldwijd netwerk dat je site draait op servers dicht bij de bezoeker. Elke wijziging krijgt een eigen preview-omgeving. Zo check je alles voordat het live gaat.

Oxygen kost niets extra op de abonnementen Starter, Basic, Grow, Advanced en Plus, en op het Pause and build-abonnement. Op Agentic-abonnementen is Oxygen niet beschikbaar (Shopify.dev).

Oxygen heeft wel grenzen. Ken ze voordat je zwaar serverwerk plant:

Voor een gewone webshop is dat ruim genoeg. Het gaat pas knellen als je server per paginabezoek veel werk doet. Denk aan complexe personalisatie, grote content-omzettingen of meerdere calls naar andere diensten per request. Past Oxygen niet, dan kun je Hydrogen ook zelf hosten.

Wat doet Next.js in een headless Shopify-setup?

Next.js is een veelgebruikt React-framework voor websites. Het wordt gemaakt door Vercel, niet door Shopify. In een headless Shopify-build:

• bouwt Next.js de pagina's die je klanten zien,
• levert Shopify de producten, de winkelmand en de checkout via de Storefront API,
• staat de redactionele content in een headless CMS. Dat is een contentsysteem zonder vast design, zoals DatoCMS.

Vercel onderhoudt ook Next.js Commerce, een startversie van een webshop. De Shopify-versie is de enige die Vercel zelf actief bijhoudt (Vercel).

Ik gebruik deze setup zelf. Orangefit is een Nederlands merk in plantaardige voeding dat in meerdere landen en talen verkoopt. De site draait op Next.js, Shopify en DatoCMS, gehost op Vercel. Hij is gekoppeld aan Algolia (zoeken), Firmhouse (abonnementen), Yotpo (loyaliteit), Klaviyo (e-mail) en Virtuagym (coaching-lidmaatschappen). De Core Web Vitals, de scores van Google voor laadsnelheid, reactiesnelheid en stabiliteit van de layout: 1s LCP, 143ms INP en 0,02 CLS. De Time to First Byte is 0,2s. Alle Core Web Vitals zijn groen.

Shopify Hydrogen en Next.js naast elkaar

Allebei gebruiken ze React. Allebei halen ze producten uit dezelfde Storefront API. En allebei sturen ze klanten naar de checkout van Shopify. Het verschil zit in waar het project om draait. Hydrogen draait om Shopify. Bij Next.js is Shopify één van de diensten waar je site data uit haalt.

Wanneer kies je Hydrogen?

Kies Hydrogen als het meeste hiervan klopt:

1. Shopify is je enige echte backend. Je content past in Shopify: producten, collecties en metaobjects (eigen contentvelden in Shopify). Je hebt geen los CMS nodig.
2. Je wilt niet over hosting nadenken. Oxygen zit in je abonnement en zet je code direct vanuit je repository live.
3. Je developers werken graag volgens de Shopify-manier. Hydrogen maakt veel keuzes voor je. Dat scheelt tijd als je ze volgt.
4. Je hebt één hoofdwebshop. Je wilt een snellere, meer op maat gemaakte winkelervaring, geen contentplatform.
5. Je wilt de nieuwste headless-functies van Shopify snel gebruiken. De developer preview van juli 2026 voegde bijvoorbeeld de Customer Account API-koppeling en WebMCP toe. Met WebMCP kunnen AI-agents in de browser producten zoeken, de winkelmand aanpassen en de checkout starten (Hydrogen release notes).

Wanneer kies je Next.js?

Kies Next.js als het meeste hiervan klopt:

1. Content helpt je producten verkopen. Verhalen, lookbooks, recepten en campagnepagina's vragen om een goed CMS met bouwblokken die je team zelf combineert. Bij The Laundry Story bepaalt DatoCMS welke pagina's er zijn en hoe ze zijn opgebouwd. Productpagina's laden eerst de data uit Shopify en vullen die aan met content uit DatoCMS als die er is. Zo blijft de webshop werken, ook als een product geen extra content heeft.
2. Meerdere systemen leveren data aan je site. Abonnementen, loyaliteit, zoeken, coaching of ERP-data staan naast Shopify. Next.js maakt het niet uit waar data vandaan komt.
3. Je website is meer dan een webshop. Merkverhalen, events, vacaturepagina's of WebGL (3D in de browser) staan op hetzelfde domein. Dezelfde aanpak met Next.js en DatoCMS gebruikte ik voor Milkshake Festival, een site die pieken in bezoekers aan moet kunnen en waarop de redactie snel moet kunnen publiceren.
4. Je wilt later van platform kunnen wisselen. Vervang je Shopify ooit, of komt er een tweede platform bij? Dan kunnen je Next.js-voorkant en je CMS-content blijven.
5. Je wilt makkelijk developers kunnen vinden. Er zijn meer Next.js-developers dan Hydrogen-developers, zowel in vaste dienst als freelance.

Twijfel je wat bij jou past? Stuur me je huidige setup en plannen. Ik zeg je eerlijk of headless de moeite waard is, en welke stack past. Plan een kennismakingsgesprek.

Hydrogen of Liquid: heb je headless wel nodig?

Veel Nederlandse merken stellen de vraag als "Hydrogen of Liquid?". Beantwoord die eerst, voordat je tussen Hydrogen en Next.js kiest. Liquid is de templatetaal van gewone Shopify-themes. Een goed gebouwd Shopify (Plus)-theme is snel, goedkoper in onderhoud en werkt met alle Shopify-apps. Headless, met Hydrogen of Next.js, is zinvol als:

• het theme je design of gebruikerservaring beperkt,
• content en producten meer door elkaar moeten lopen dan secties en blokken in een theme toelaten,
• je meerdere landen of merken hebt, elk met veel eigen content, of
• je je snelheidsdoelen niet haalt met een theme vol apps.

Veel Shopify-apps voegen functies toe via theme app extensions. Die werken niet op een headless site. Je hebt dan de API van de app nodig of een maatwerkkoppeling. Op mijn pagina over webshops lees je meer over beide routes, native en headless.

Is Hydrogen sneller dan Next.js?

Niet vanzelf. Snelheid hangt af van hoe de site gebouwd is, niet van het framework. Allebei kunnen ze pagina's op de server renderen, ze dicht bij de bezoeker cachen en weinig JavaScript naar de browser sturen. En allebei worden ze traag van zware scripts, grote afbeeldingen en te veel tracking-tags.

Twee feiten doen er wel toe:

• De Storefront API groeit mee met je bezoekers. Volgens Shopify hebben verzoeken van echte kopers geen vaste limiet per minuut. Bots en crawlers worden wel begrensd, en het aanmaken van checkouts is per minuut beperkt (Shopify.dev). Dat geldt voor beide frameworks.
• Snelheid levert geld op. In een onderzoek van 55 en Deloitte in opdracht van Google leidde een mobiele site die 0,1 seconde sneller was tot 9,1% meer retailbezoekers die van productpagina naar winkelmand gingen. Ze gaven ook 9,2% meer uit (web.dev).

Kies dus het framework dat bij je setup past. Spreek daarna Core Web Vitals-doelen af met wie de site bouwt, en meet ze bij de lancering.

Hoe zit het met AVG en hosting in de EU?

Voor Nederlandse en Europese merken bepaalt de keuze ook waar je servercode draait en welke tools persoonsgegevens zien. Oxygen draait op het wereldwijde netwerk van Shopify. Met Next.js kies je zelf je host, zoals Vercel of een Europese partij, en heb je meer invloed op waar serverfuncties draaien. Hoe dan ook: houd checkout, klantaccounts en toestemming binnen de privacytools van Shopify. Zet elk extern script in je cookie-instellingen. Het framework bepaalt dit niet. Je keuzes voor hosting en tracking wel.

Shopify Hydrogen of Next.js: checklist met 10 vragen

Beantwoord met ja of nee:

1. Staat meer dan zo'n 80% van de data van je site in Shopify?
2. Kan je marketingteam content beheren in Shopify-metaobjects zonder zich te ergeren?
3. Draait het vooral om één webshop (niet om meerdere merken of sites)?
4. Wil je dat Shopify de hosting regelt en beheert?
5. Volgen je developers de werkwijze en releases van Shopify?
6. Gebruik je een headless CMS voor campagnes en redactionele pagina's?
7. Haalt de site data uit tools voor abonnementen, loyaliteit, zoeken of ERP?
8. Staat er meer op het domein dan de webshop, zoals events, vacatures of 3D/WebGL?
9. Is het belangrijk om de komende vijf jaar of langer niet vast te zitten aan één platform?
10. Wil je dat veel developers de code kunnen overnemen?

Vooral ja op 1 t/m 5: Hydrogen past goed. Vooral ja op 6 t/m 10: Next.js is waarschijnlijk de betere basis. Gemengd: begin met een scopingsessie. Vaak hangt het antwoord af van de één of twee koppelingen met het meeste risico.

Zo pak ik headless Shopify-projecten aan

Elk project krijgt een vaste prijs. De stappen: intake, scope en voorstel, bouw, iteratie, oplevering, en onderhoud zonder retainercontract. Voor headless Shopify betekent dat:

• elke databron komt op een rij (Shopify, CMS, zoeken, abonnementen) voordat ik code schrijf,
• ik ontwerp CMS-blokken die je marketingteam kan gebruiken zonder de layout te breken,
• Core Web Vitals-doelen leg ik vooraf vast en meet ik bij de lancering, en
• ik documenteer de setup, zodat een andere developer het kan overnemen.

Veelgestelde vragen

Wat is Shopify Hydrogen? Shopify Hydrogen is het open-source React-framework van Shopify voor een headless Shopify webshop. Het draait op React Router, heeft Shopify-tools voor winkelmand, klantaccounts en caching, en je zet het live op Oxygen, de hosting van Shopify.

Is Shopify Hydrogen gratis? Het framework is open source. Oxygen-hosting kost niets extra op de abonnementen Starter, Basic, Grow, Advanced en Plus. Je betaalt wel je Shopify-abonnement en de bouw van de site, en dat is de grootste kostenpost.

Wat is het verschil tussen Shopify Hydrogen en Oxygen? Hydrogen is het framework waarmee je de site bouwt. Oxygen is de hosting waarop die draait. Je kunt Hydrogen ook zelf hosten.

Is Shopify Hydrogen beter dan Next.js? Geen van beide is altijd beter. Hydrogen past bij merken die bijna alles in Shopify doen en de kortste weg naar headless willen. Next.js past bij merken die Shopify combineren met een headless CMS, andere databronnen of pagina's buiten de webshop.

Hydrogen of Liquid: wat kies je voor een Nederlandse webshop? De meeste webshops zijn het best af met een goed gebouwd Liquid-theme. Kies pas voor headless (Hydrogen of Next.js) als je je doelen voor design, content, meerdere landen of snelheid niet haalt met een theme.

Werken Shopify-apps met Hydrogen of een andere headless site? Apps die functies toevoegen via theme app extensions werken niet op een headless site. Apps met een API kun je meestal wel koppelen, maar dat is maatwerk. Check je lijst met apps tijdens de scoping.

Klaar om je headless stack te kiezen?

Hydrogen, Next.js of een beter Shopify-theme: de juiste keuze hangt af van je content, je koppelingen en je team. Ik bouw headless Shopify-webshops die marketingteams in Nederland en de rest van de EU zelf kunnen beheren. Wil je een headless Shopify webshop laten maken? Vertel me over je webshop en je krijgt een helder voorstel met een vaste prijs. Of mail naar info@petercoolen.com of bel +31 6 57 54 60 27.

Bronnen

• Shopify.dev: Hydrogen and Oxygen fundamentals
• Shopify.dev: Storefront API (rate limits)
• Hydrogen developer preview release notes, 8 juli 2026
• Vercel: Next.js Commerce template
• web.dev: Milliseconds Make Millions (55 en Deloitte, in opdracht van Google)
• Weaverse: Hydrogen May 2026 update (React Router 7)