Magento 2 en headless — PWA Studio vs Hyvä vs custom React

Magento 2 en headless — PWA Studio vs Hyvä vs custom React

Drie teams, drie Magento-projecten, drie totaal verschillende keuzes voor de frontend. Het ene team kiest PWA Studio omdat het "de officiële Adobe-aanpak" is. Het andere team kiest Hyvä omdat het snel en simpel is. Het derde team bouwt een custom React-frontend omdat ze maximale flexibiliteit willen.

Twee jaar later zijn de resultaten heel anders dan verwacht.

Dit artikel legt de eerlijke vergelijking neer. Geen marketingpraatjes, maar kosten, performance, developer experience en wanneer welke keuze de juiste is.

Wat je leert in dit artikel

• Wat het verschil is tussen PWA Studio, Hyvä en custom React architectureel
• Gemeten performance-cijfers van alle drie
• Kosten en implementatietijd per aanpak
• Developer experience eerlijk beoordeeld
• Wanneer welke aanpak past bij welke situatie

De drie strategieën uitgelegd

PWA Studio

PWA Studio is Adobe's officiële React-based frontend voor Magento. Beschikbaar als open source, gebouwd door Adobe, gebaseerd op React en GraphQL.

PWA Studio is een volwaardige Progressive Web App. Werkt offline (beperkt), heeft een app-like shell navigatie en is mobile-first gebouwd.

Browser
  ↓
PWA Studio (React SPA)
  ↓ GraphQL
Magento 2 Backend (API-only)
  ↓
Database, Cache, Search

Hyvä Theme

Hyvä is geen headless oplossing. Het is een radicale vereenvoudiging van de Magento frontend, gebouwd als Magento-thema. Geen React, geen Vue. Alpine.js voor interactiviteit, Tailwind CSS voor styling.

Browser
  ↓ HTTP Request
Magento 2 + Hyvä Theme (server-side rendering)
  ↓
Database, Cache, Search

Hyvä is geen headless, maar de performance is vergelijkbaar met headless dankzij de extreme vereenvoudiging van de frontend-code.

Custom React frontend

Een volledig zelfgebouwde React-applicatie die communiceert met Magento via de GraphQL of REST API. Geen gebruik van PWA Studio of Hyvä. Volledige controle, maar ook volledige verantwoordelijkheid.

Browser
  ↓
Next.js / React (SSR of SSG)
  ↓ GraphQL/REST
Magento 2 Backend (API-only)
  ↓
Database, Cache, Search

Performance vergelijking

Alle metingen zijn uitgevoerd op productie-webshops met vergelijkbare catalogusgrootte (10.000-15.000 SKU's). Lighthouse mobiel, gesimuleerde 4G.

Hyvä wint op vrijwel elke metric. PWA Studio heeft de hoogste Time to Interactive door de grote React-bundle die moet hydrateren. Custom Next.js scoort redelijk goed dankzij server-side rendering.

Kosten vergelijking

Dit is waar de echte beslissing valt. Performance-cijfers zijn indrukwekkend, maar budgetten zijn eindig.

Initiële implementatie

De tijdsindicaties zijn reëel. Custom React-projecten worden stelselmatig onderschat in tijdlijn en kosten.

Doorlopende onderhoudskosten

Custom React-frontends hebben de hoogste TCO. Elke Magento-update kan breaking changes introduceren in de GraphQL API die je zelf moet oplossen. Er is geen community die meebewegt.

Developer Experience

PWA Studio DX

PWA Studio heeft de zwaarste leercurve van de drie. Het framework heeft eigen abstracties (Peregrine hooks, Venia UI componenten) die je moet leren naast React.

De documentatie is uitgebreid maar inconsistent. Sommige onderdelen zijn goed gedocumenteerd, andere nauwelijks. Community-support via Discord en GitHub is aanwezig maar minder actief dan de Hyvä-community.

// PWA Studio: typische component structuur
import React from 'react';
import { useProduct } from '@magento/peregrine/lib/hooks/useProduct';
import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';
import defaultClasses from './product.module.css';
import { mergeClasses } from '@magento/venia-ui/lib/classify';

const Product = props => {
    const { product } = useProduct({ id: props.id });
    const classes = mergeClasses(defaultClasses, props.classes);

    if (!product) return null;

    return (
        <div className={classes.root}>
            <h1 className={classes.name}>{product.name}</h1>
        </div>
    );
};

De mergeClasses aanpak voor styling is onhandig. CSS Modules gecombineerd met een eigen merge-systeem zorgt voor onnodige complexiteit.

Hyvä DX

Hyvä is ontworpen voor PHP-developers die al Magento kennen. De leercurve is laag. Alpine.js is in een middag te leren voor iemand die al JavaScript kent.

<!-- Hyvä: typische productpagina component -->
<div x-data="initProductPage()" x-init="init()">
    <h1 class="text-2xl font-bold text-gray-900">
        <?= $block->escapeHtml($product->getName()) ?>
    </h1>

    <div x-show="selectedOption" class="mt-4">
        <span x-text="'Geselecteerd: ' + selectedOption"></span>
    </div>

    <button
        @click="addToCart()"
        :disabled="isAdding"
        class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700"
    >
        <span x-text="isAdding ? 'Wordt toegevoegd...' : 'Toevoegen aan winkelwagen'"></span>
    </button>
</div>

PHP server-side rendering met Alpine.js voor interactiviteit. Elke Magento-developer die PHP-templates kent, kan hier direct mee aan de slag.

Custom React DX

Custom React heeft de beste developer experience voor teams die React goed kennen. Volledige vrijheid in architectuur, tooling en bibliotheken. Next.js als framework geeft server-side rendering en een goede developer experience out-of-the-box.

// Custom React: productpagina (Next.js)
import { GetStaticProps } from 'next';
import { getProduct } from '@/lib/magento';

interface ProductPageProps {
    product: MagentoProduct;
}

export default function ProductPage({ product }: ProductPageProps) {
    return (
        <main>
            <h1 className="text-2xl font-bold">{product.name}</h1>
            <AddToCartButton productId={product.id} />
        </main>
    );
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
    const product = await getProduct(params?.slug as string);
    return { props: { product }, revalidate: 3600 };
};

Het probleem: je bent verantwoordelijk voor alles. Cart-management, checkout-flow, klantaccounts, zoekintegratie — elke feature die Magento native biedt, moet je zelf bouwen of een bibliotheek voor vinden.

Wanneer kies je welke aanpak?

Kies Hyvä als:

• Je team al Magento-ervaring heeft
• Je budget onder de €80.000 zit voor de initiële implementatie
• Je snel wilt lanceren (4-8 weken is haalbaar)
• Je geen fundamenteel andere UX nodig hebt dan een klassieke webshop
• Je lange termijn onderhoudskosten laag wilt houden

Voor 80% van de Magento-webshops is Hyvä de beste keuze. Sneller, goedkoper, beter te onderhouden.

Kies PWA Studio als:

• Je een PWA wilt met offline functionaliteit en native app-integratie
• Je team sterke React-ervaring heeft
• Je als groot team werkt waarbij de strikte structuur van PWA Studio helpt
• Je Adobe-ondersteuning wilt voor je frontend-keuzes

Eerlijk gezegd: de situaties waarin PWA Studio de beste keuze is, zijn zeldzaam. Adobe heeft PWA Studio lange tijd niet actief doorontwikkeld. De community is kleiner dan die van Hyvä.

Kies custom React als:

• Je fundamenteel andere UI/UX-patronen wilt dan een klassieke webshop biedt (app-like navigatie, real-time features)
• Je team uitstekende React en Next.js-kennis heeft
• Je budget en tijdlijn ruimte geven voor een volledige custom build
• Je Magento alleen als commerce backend gebruikt en een volledig ontkoppelde frontend wilt

Custom React is de duurste optie met de hoogste technische schuld. Het loont wanneer de UX-vereisten zo specifiek zijn dat geen enkel thema of framework ze kan bieden.

De combinatie die wij het meest aanbevelen

Voor de meeste Nederlandse webshops: Magento 2 Open Source + Hyvä Theme + Hyvä Checkout.

Goedkoper dan PWA Studio om te bouwen, sneller in performance, lager in onderhoud. De performance-cijfers zijn vergelijkbaar met of beter dan headless oplossingen, zonder de complexiteit.

Voor webshops die echt headless moeten: Magento 2 backend + Next.js frontend, maar dan met een realistisch tijdlijn en budget. Geen 6-weken-deadline voor een volledige custom checkout.

De mythe van "headless is altijd beter"

Headless is een architectuurpatroon, geen kwaliteitslabel. Een slecht gebouwde headless frontend presteert slechter dan een goed gebouwd Hyvä-thema.

Wij zien regelmatig custom React-frontends met Lighthouse-scores van 45-60 — slechter dan de Luma-checkout die ze probeerden te verbeteren. Een grote React-bundle zonder SSR, geen image-optimalisatie, te veel client-side API-calls. Headless is niet automatisch snel.

Hyvä bewijst dat server-side rendering met een minimale JavaScript-footprint beter presteert dan veel headless implementaties. De architectuur bepaalt de performance, niet het label.

Bekijk ook Magento voor een overzicht van onze aanpak en ons artikel over headless e-commerce: hype of businesscase voor een bredere analyse.

Conclusie

PWA Studio is de officiële Adobe-aanpak, maar de praktische voordelen zijn beperkt vergeleken met de complexiteit en kosten. Custom React biedt de meeste vrijheid, maar tegen een prijs die de meeste webshops niet rechtvaardigen.

Hyvä wint op bijna alle praktische criteria: snelheid, kosten, onderhoudbaarheid en performance.

Kies headless alleen als de UX-vereisten het echt vereisen. Kies Hyvä als je een snelle, beheersbare Magento-webshop wilt met uitstekende performance.

Wil je de juiste keuze maken voor jouw situatie? Neem contact op — wij helpen je de businesscase te bouwen.

Veelgestelde vragen

Kan ik later migreren van Hyvä naar headless?

Ja. Magento's backend API is dezelfde ongeacht welke frontend je gebruikt. Een migratie van Hyvä naar een React-frontend is een pure frontend-operatie. De backend hoeft niet aan te passen.

Is Hyvä ook geschikt voor B2B-webshops?

Ja. De Hyvä B2B-module ondersteunt company accounts, shared catalogs en negotiable quotes. Voor Adobe Commerce B2B-features is er een aparte Hyvä Commerce-module.

Ondersteunt PWA Studio Hyvä-extensies?

Nee. PWA Studio en Hyvä zijn volledig gescheiden frontend-ecosystemen. Extensies zijn niet uitwisselbaar.

Hoe zit het met PWA Studio's toekomst?

Adobe heeft aangekondigd dat de ontwikkeling van PWA Studio verschuift richting Adobe Edge Delivery Services. De lange-termijn roadmap voor PWA Studio als standalone product is onduidelijk. Dit is een risicofactor om mee te wegen.