Hyvä Commerce vs headless (PWA Studio)

Hyvä Commerce vs headless (PWA Studio)

PWA Studio kost je gemiddeld 40-60% meer ontwikkeltijd dan een Hyvä-implementatie — voor een vergelijkbare frontend. Toch kiezen teams er nog steeds voor. Soms terecht, vaak niet. Dit artikel legt de twee aanpakken naast elkaar: complexiteit, kosten, performance en onderhoud. Inclusief de gevallen waar headless wél de juiste keuze is.

Wat is het verschil eigenlijk?

PWA Studio is Magento's eigen headless framework: een React-gebaseerde frontend die via GraphQL communiceert met de Magento backend. Venia is de referentie-implementatie.

Het fundamentele verschil: Hyvä is HTML-first met Tailwind en Alpine. PWA Studio is JavaScript-first met React, GraphQL en een volledige build-pipeline aan de voorkant.

Complexiteit: één stack vs twee

Bij PWA Studio onderhoud je twee aparte applicaties. De Magento backend levert data via GraphQL. De React-frontend verwerkt die data en rendert de UI. Dat klinkt modulair, maar in de praktijk betekent het:

• Twee deployment-pipelines (backend + frontend).
• GraphQL-schema's die synchroon moeten blijven met Magento-versies.
• Een Node.js-server voor SSR, of accepteer een kaal HTML-skelet voor crawlers.
• Aparte caching-lagen voor de GraphQL-responses.
• Elk nieuw Magento-feature (B2B, staging, prijsregels) moet handmatig worden ontsloten via GraphQL-resolvers of workarounds.

Hyvä draait in dezelfde Magento-installatie. Er is geen aparte frontend-server. Merchants-tools — waaronder een modern CMS met live preview, een vernieuwd admin-theme, een image editor en automatische media-optimalisatie — werken out-of-the-box met de bestaande Magento-data.

Voor een team zonder dedicated React-specialisten is dat een significante vereenvoudiging.

Performance: de cijfers

Hyvä levert ~95% minder JavaScript dan Luma, en structureel minder dan een typische PWA Studio-build. Alpine handles interactivity; Tailwind handles styling. Geen virtual DOM, geen hydration-overhead.

Wij zien bij klanten dat Hyvä-shops consistent boven de 90 scoren op alle drie de Core Web Vitals. Bij PWA Studio is dat sterk afhankelijk van de implementatie — en van hoeveel tijd je investeert in bundle splitting, SSR en caching.

Meer details over de performance-aanpak van Hyvä staan in ons artikel over Hyvä Commerce en Core Web Vitals.

Kosten: licentie vs maatwerk

Hyvä Commerce heeft een duidelijke licentiestructuur:

• ~3.000 euro per jaar (subscription).
• ~12.000 euro eenmalig voor doorlopend eigenaarschap. PPP- en trade-in-regelingen bestaan.
• Implementatiekosten komen daar bovenop — maar die zijn lager dan bij PWA Studio.

PWA Studio heeft geen licentiekosten. Maar dat is misleidend:

• De initiële implementatie kost meer uren door de architectuurcomplexiteit.
• Onderhoud is zwaarder: Magento-updates breken GraphQL-schema's, npm-dependencies hebben hun eigen lifecycle.
• Je hebt specialisten nodig voor zowel Magento als React. Dat zijn zelden dezelfde persoon.

Een Hyvä-implementatie van een middelgrote B2C-webshop kost bij ons typisch 15-25% minder ontwikkeldagen dan een vergelijkbare PWA Studio-build. De licentiekosten zijn er in de meeste gevallen uit in het eerste jaar.

Onderhoud: één pad vs puzzelen

Het onderhoud is waar PWA Studio het hardst verliest in de dagelijkse praktijk.

Bij een headless setup:

• Magento-core updates kunnen breaking changes introduceren in GraphQL.
• React- en npm-dependencies vereisen aparte aandacht en eigen release-cycles.
• Staging en preview werken anders aan de frontend dan in de Magento-backend.
• Custom modules (B2B, ERP-koppelingen) moeten twee keer worden geïmplementeerd: backend én GraphQL-layer.

Hyvä volgt het Magento-release-pad. Updates zijn voorspelbaar. De merchant-tools — live preview in het CMS, het dashboard, de image editor — zijn onderdeel van dezelfde suite en updaten mee.

Voor een shop die elke zes maanden een grote campagne draait en geen dedicated platform-team heeft, is dat onderhoudsverschil bepalend.

Wanneer Hyvä Commerce niet de juiste keuze is

Eerlijkheid: er zijn situaties waar headless wél logischer is.

Heb je één backend die een webshop, een mobiele app én een kiosk-interface voedt? Dan is een GraphQL-layer zinvol. Hyvä is primair een webfrontend.

Hyvä geeft je veel vrijheid, maar bouwt voort op Magento's template-model. Wil je een volledig custom navigatie-ervaring met complexe client-side state (denk: product-configurator met 50+ variabelen), dan kan React-gebaseerde headless die state beter managen.

Als je intern een sterk React-team hebt en Magento alleen als data-backend gebruikt, is PWA Studio (of een alternatief zoals Next.js Commerce) een logische keuze. Hyvä vereist kennis van Alpine en Magento's template-systeem — dat is geen hogere drempel, maar wél een andere.

Hyvä werkt op Magento 2 en Adobe Commerce. Gebruik je een andere commerce-backend, dan is Hyvä geen optie.

Developer-ervaring: concreet verschil

Een fragment uit een Hyvä-component geeft een idee van de aanpak:

<!-- Hyvä: Alpine-component, geen build-step nodig voor logica -->
<div x-data="{ open: false }">
    <button @click="open = !open" class="btn-primary">
        Filter
    </button>
    <div x-show="open" x-transition class="filter-panel">
        <!-- Magento block-output hier -->
        <?= $block->getChildHtml('filter.options') ?>
    </div>
</div>

Vergelijk dit met een PWA Studio-component:

// PWA Studio: React-component met GraphQL-query
import { useQuery } from '@apollo/client';
import GET_FILTERS from './getFilters.gql';

const FilterPanel = ({ categoryId }) => {
    const { data, loading, error } = useQuery(GET_FILTERS, {
        variables: { categoryId }
    });

    if (loading) return <Skeleton />;
    if (error) return null;

    return (
        <div className="filter-panel">
            {data.products.aggregations.map(filter => (
                <FilterGroup key={filter.attribute_code} filter={filter} />
            ))}
        </div>
    );
};

Beide werken. Maar de Hyvä-variant heeft geen build-step, geen GraphQL-query, geen loading-state en geen aparte data-laag. Voor een Magento-developer is de Hyvä-aanpak direct vertrouwd.

B2B en Adobe Commerce

Een veelgehoord bezwaar: "Headless geeft ons meer controle over de B2B-features."

Hyvä werkt op Adobe Commerce, inclusief de B2B-module. Prijsregels, offertes, company-accounts, gelaagde catalogi — dat werkt allemaal. Hyvä Commerce heeft geen eigen B2B-layer nodig omdat het de Magento B2B-functionaliteit niet vervangt maar ondersteunt.

Bij PWA Studio moet je B2B-features handmatig ontsluiten via GraphQL. Dat is extra werk, en Adobe's GraphQL-coverage van B2B-features is historisch gezien achter geraakt op de PHP-implementatie.

Conclusie

Hyvä Commerce is voor de meeste Magento-shops de betere keuze. Lagere complexiteit, voorspelbaar onderhoud, Lighthouse 95+, en een licentieprijs die zichzelf terugverdient in lagere implementatie- en onderhoudskosten.

PWA Studio loont als je een bewuste architectuurkeuze maakt voor headless — omdat je meerdere frontends voedt, al een React-team hebt, of specifieke UX-vereisten hebt die een volledige SPA rechtvaardigen. Niet omdat het "moderner" klinkt.

Wil je weten welke aanpak past bij jouw platform, team en roadmap? Wij doen een gratis Tech Check: één gesprek, concrete aanbeveling, geen verkooppraatje. Plan hem via /contact.