Een Hyvä-storefront laadt gemiddeld onder de 25 KB JavaScript. PWA Studio zit rond de 500 KB. Vue Storefront ergens daartussenin, afhankelijk van hoe je het bouwt.
Hyvä vs PWA Studio vs Vue Storefront — de frontend keuze 2026
Een Hyvä-storefront laadt gemiddeld onder de 25 KB JavaScript. PWA Studio zit rond de 500 KB. Vue Storefront ergens daartussenin, afhankelijk van hoe je het bouwt. Dat ene cijfer bepaalt vaak al 80% van de keuze.
Wij bouwen op alle drie. Niet omdat we geen voorkeur hebben, maar omdat de juiste keuze afhangt van je shop, je team en je budget. In dit artikel leggen we de drie naast elkaar op de zaken die er echt toe doen: performance, complexiteit, kosten, SEO, team-skills en onderhoud.
Geen marketingverhaal. Wel concrete cijfers en de gevallen waarin we een klant actief afraden om een bepaalde stack te kiezen.
De drie frontends in het kort
De drie verschillen fundamenteel in architectuur. Dat is de kern van alles wat volgt.
- Hyvä — een complete vervanging van het Magento Luma-theme. Server-side rendered PHP met Tailwind CSS en Alpine.js. Geen aparte frontend-app, geen Node-laag. Magento rendert de HTML zoals het altijd deed, alleen veel sneller.
- PWA Studio — Adobe's eigen headless framework. Een React-app (Venia als referentie-theme) die via GraphQL met Magento praat. Aparte Node-laag, aparte deploy, aparte build.
- Vue Storefront — vendor-agnostisch headless framework op Vue/Nuxt. Praat met Magento via een middleware-laag (Alokai). Ook een aparte frontend-app met eigen hosting.
Hyvä is een theme. De andere twee zijn losgekoppelde frontends. Dat onderscheid verklaart bijna elk verschil hieronder.
Performance: waar de cijfers liggen
Performance is geen vanity metric. Een seconde sneller laden tikt direct door in conversie. Wij zien dat bij vrijwel elke migratie terug.
Typische Lighthouse-scores die wij in de praktijk halen:
| Frontend | JS-payload (initieel) | Lighthouse mobile | LCP (mobiel) |
|---|---|---|---|
| Luma (referentie) | ~400 KB | 20-40 | 4-6s |
| Hyvä | ~25 KB | 90-100 | 1-2s |
| PWA Studio | ~450-550 KB | 50-75 | 2.5-4s |
| Vue Storefront | ~150-300 KB | 65-85 | 2-3.5s |
Hyvä wint hier vrijwel altijd. De reden is simpel: er is bijna geen JavaScript te downloaden, parsen en uitvoeren. Alpine.js is enkele KB's. Geen virtual DOM, geen hydration-kosten.
PWA Studio betaalt de prijs van React plus de Venia-bundel. Je kunt dit optimaliseren, maar je begint met een achterstand. De hydration-stap kost extra tijd op het main thread, precies waar zwakkere mobiele toestellen al worstelen. Vue Storefront zit ertussenin en is met goede code-splitting redelijk te tunen.
Belangrijk detail: een hoge Lighthouse-score op een dure testlaptop zegt weinig. De echte winst van Hyvä zien wij op het mid-range Android-toestel waarmee een groot deel van het Nederlandse webwinkelverkeer binnenkomt. Minder JavaScript betekent minder CPU-werk, en daar zit het verschil tussen 2 en 5 seconden tot interactie.
We hebben deze cijfers in detail uitgewerkt in onze Hyvä vs Luma performance-vergelijking. De korte versie: minder JavaScript wint.
Complexiteit en architectuur
Hoe meer bewegende delen, hoe meer dat kost in bouw en onderhoud. Dit is het stille kostenverschil dat in offertes vaak ontbreekt.
Hyvä draait binnen Magento. Eén applicatie, één deploy, één server. Je Magento-developer kan ervoor bouwen na een korte leercurve. Geen extra infrastructuur. PWA Studio is twee applicaties. Magento als backend, een Node-app als frontend. Je hebt GraphQL-kennis nodig, een React-team en een aparte hostingomgeving. Elke maatwerkfeature raakt mogelijk beide kanten. Vue Storefront voegt een derde laag toe: de Alokai-middleware. Magento, middleware, en Vue-frontend. Dat geeft flexibiliteit (meerdere backends, makkelijk wisselen), maar het is ook meer dat kan breken.Vuistregel: elke extra laag verdubbelt ongeveer het aantal plekken waar een bug kan ontstaan en het aantal mensen dat ervan moet weten.
Een concreet voorbeeld. Wil je een nieuw productattribuut tonen op de productpagina? Bij Hyvä pas je een template aan, klaar. Bij PWA Studio of Vue Storefront breid je het GraphQL-schema uit, pas je de resolver aan, update je de frontend-query en render je het attribuut in de component. Vier plekken in plaats van één, voor exact dezelfde uitkomst.
SEO en SSR: het detail dat shops breekt
Dit is waar headless setups vaak pijn doen. SEO is geen creatief vak. Het is een wiskundevraagstuk, en JavaScript-rendering maakt die som ingewikkelder.
Hyvä rendert server-side, als vanouds. Google krijgt complete HTML. Geen rendering-budget-problemen, geen hydration-issues, geen lege pagina's in de crawler. SEO werkt zoals je Magento-SEO altijd werkte. PWA Studio rendert client-side. Out of the box krijgt een crawler een grotendeels lege pagina die pas met JavaScript wordt ingevuld. Google kan dat aan, maar het kost rendering-budget en het gaat regelmatig mis bij grote catalogi. SSR toevoegen kan, maar dat is extra werk en extra infrastructuur. Vue Storefront draait op Nuxt en heeft SSR ingebouwd. Dat is een groot voordeel boven kale PWA Studio. Wel moet je de SSR-laag goed configureren en hosten, anders verlies je het voordeel alsnog.Voor wie SEO als belangrijkste kanaal heeft, is server-side rendering geen luxe. Hyvä geeft het cadeau. Vue Storefront levert het mits goed opgezet. PWA Studio vraagt er extra werk voor.
Kosten: bouw en exploitatie
Budget is vaak de doorslaggevende factor, dus laten we eerlijk zijn over de getallen.
De kostenverhouding die wij in de praktijk zien, ruw geschat:
- Hyvä — laagste bouwkosten, laagste TCO. Je gebruikt je bestaande Magento-stack en hosting. Geen extra Node-servers, geen middleware-licentie. Veel community-modules hebben al Hyvä-compatibele frontends.
- PWA Studio — 1,5 tot 2,5x de bouwkosten van Hyvä voor een vergelijkbare shop. Extra hosting, meer specialistische developers, langere bouwtijd.
- Vue Storefront — vergelijkbaar met PWA Studio in bouwkosten, plus mogelijke licentie- of hostingkosten voor de Alokai-cloud. Wel sneller bij sommige integraties dankzij kant-en-klare connectors.
De grootste verborgen kost zit niet in de bouw maar in het onderhoud. Een headless setup met drie lagen vraagt structureel meer engineering-uren per jaar. Dat tikt aan.
Wil je weten wat jouw specifieke shop zou kosten op elke stack? Neem contact op — we maken een eerlijke inschatting zonder verkooppraatje.
Team-skills: wie gaat dit beheren?
De beste stack is de stack die jouw team kan onderhouden. Een briljante headless setup die niemand intern begrijpt is een liability.
Hyvä vraagt: PHP/Magento-kennis, Tailwind, een beetje Alpine.js. Heb je al een Magento-developer? Dan is de stap klein. De leercurve is dagen, geen maanden. PWA Studio vraagt: stevige React-kennis, GraphQL, Node, en begrip van Magento's GraphQL-schema. Dat is een ander profiel dan de klassieke Magento-developer. Je hebt vaak twee teams nodig of full-stackers die beide werelden kennen. Vue Storefront vraagt: Vue/Nuxt-ervaring, GraphQL, en kennis van de Alokai-middleware. Vue-developers zijn er, maar specifiek met Vue Storefront-ervaring minder.Eerlijke observatie: de meeste Nederlandse e-commerce-teams hebben al Magento-mensen, geen React- of Vue-specialisten. Dat maakt Hyvä voor veruit de meeste shops de pragmatische keuze.
Onderhoud en toekomstbestendigheid
Een frontend bouw je één keer en onderhoud je jaren. Het langetermijnverhaal weegt zwaarder dan de eerste oplevering.
Hyvä wordt actief doorontwikkeld en is inmiddels de de-facto standaard voor moderne Magento-frontends. De community groeit hard, modules verschijnen snel. Risico: het zit dicht op Magento, dus je bent afhankelijk van Magento's roadmap. Voor de meeste shops is dat geen probleem. PWA Studio is Adobe's project. Het voordeel: officiële support binnen het Adobe Commerce-ecosysteem. Het nadeel: de community-adoptie is beperkt gebleven en de ontwikkelsnelheid is wisselend. Wij zien minder nieuwe projecten op PWA Studio starten dan een paar jaar geleden. Vue Storefront is het meest flexibel. Vendor-agnostisch, dus je kunt in theorie van Magento naar een ander platform zonder je frontend weg te gooien. Dat is waardevol als je een replatform overweegt. Prijs: je leunt op een externe middleware-vendor.Wanneer kies je wat
Geen stack wint altijd. Dit is hoe wij adviseren:
Kies Hyvä als:- SEO en performance je belangrijkste prioriteiten zijn.
- Je een bestaand Magento-team of -partner hebt.
- Je budget en time-to-market scherp zijn.
- Je shop een redelijk standaard storefront nodig heeft (wat 90% is).
- Je diep in het Adobe Commerce-ecosysteem zit en officiële support wil.
- Je een app-achtige, sterk interactieve frontend nodig hebt.
- Je een volwassen React-team hebt.
- Je meerdere backends wil koppelen of een replatform overweegt.
- Je een Vue/Nuxt-team hebt.
- Je maximale frontend-flexibiliteit boven eenvoud verkiest.
Wij raden headless actief af wanneer een klant geen zwaar interactieve frontend nodig heeft en geen frontend-specialisten in huis heeft. De complexiteit betaalt zich dan nooit terug. In die gevallen is Magento met Hyvä bijna altijd het juiste antwoord.
Twijfel je over migreren naar Hyvä vanaf je huidige setup? Dat is meestal eenvoudiger dan een volledige headless-overstap, met een beter conversieresultaat. We hebben het verschil in checkout-conversie uitgewerkt in onze Hyvä checkout vs Luma vergelijking.
Veelgestelde vragen
Is Hyvä headless?
Nee. Hyvä is een server-side gerenderd Magento-theme, geen headless frontend. Het vervangt Luma binnen Magento zelf. Dat is precies waarom het zo snel en SEO-vriendelijk is: er is geen aparte frontend-app en geen client-side rendering nodig.
Welke frontend is het snelst?
Hyvä, in vrijwel alle praktijkgevallen. Het laadt onder de 25 KB JavaScript tegenover honderden KB's bij PWA Studio. Dat vertaalt zich direct in betere Lighthouse-scores en een snellere LCP, vooral op mobiel.
Is PWA Studio dood?
Nee, maar de adoptie is gestagneerd. Adobe ondersteunt het binnen Adobe Commerce, maar wij zien duidelijk minder nieuwe projecten erop starten. Voor de meeste shops biedt het geen voordeel boven Hyvä, tegen hogere kosten en complexiteit.
Kan ik later wisselen van frontend?
Ja, maar het kost werk. Vue Storefront is het makkelijkst te ontkoppelen omdat het vendor-agnostisch is. Van Luma naar Hyvä migreren is goed te doen en levert direct performancewinst. Een volledige overstap naar of van headless is altijd een serieus project.
Wat kost een Hyvä-frontend ongeveer?
Dat hangt af van de complexiteit van je shop en hoeveel maatwerk je nodig hebt. Hyvä is doorgaans de goedkoopste van de drie omdat je je bestaande Magento-stack hergebruikt zonder extra infrastructuur. Neem contact op voor een concrete inschatting voor jouw situatie.

Geschreven door Ruthger Idema
15+ jaar ervaring in e-commerce development. Gespecialiseerd in Magento, Shopify en Laravel maatwerk.
Meer over ons team →