Liquid vs Hydrogen — wanneer kies je wat?

Liquid vs Hydrogen — wanneer kies je wat?

Shopify heeft twee fundamenteel verschillende frontendstacks. Liquid is er al 18 jaar. Hydrogen bestaat sinds 2022. De meeste discussies over de keuze gaan over performance. De echte beslissingsfactoren zijn team, budget en complexiteit.

Wij bouwen beide. Dit artikel is geen sales pitch voor één van de twee. Het is de analyse die we zelf gebruiken bij elke Shopify-opdracht.

Wat je leert in dit artikel

• Hoe Liquid en Hydrogen technisch werken
• Wanneer performance werkelijk het verschil maakt
• Wat de totale kosten zijn over 2 jaar
• Welke teamsamenstelling je nodig hebt
• Een beslismatrix voor jouw situatie

Hoe Liquid werkt

Liquid is Shopify's eigen templating taal. Je schrijft .liquid bestanden die server-side worden gerenderd door Shopify's CDN-infrastructuur. De output is HTML die direct naar de browser gaat.

Het voordeel: geen eigen server, geen deployment-infrastructuur, Shopify regelt caching, edge nodes en uptime. Een standaard Liquid theme draait op Shopify's CDN in meer dan 280 steden wereldwijd.

Het nadeel: Liquid is beperkt. Je hebt geen component-model, geen state management en geen directe toegang tot JavaScript-ecosystemen. Interactiviteit bouw je met custom JavaScript naast Liquid.

{%- comment -%}
  Liquid: server-side rendering, geen state, geen components
{%- endcomment -%}
{%- for product in collection.products -%}
  <article class="product-card">
    <img
      src="{{ product.featured_image | image_url: width: 400 }}"
      alt="{{ product.featured_image.alt | escape }}"
      width="400"
      height="400"
      loading="lazy"
    >
    <h2>{{ product.title }}</h2>
    <p>{{ product.price | money }}</p>
  </article>
{%- endfor -%}

Hoe Hydrogen werkt

Hydrogen is Shopify's React-framework gebouwd op Remix. Het draait op Oxygen — Shopify's edge hosting platform — of op een eigen server via Node.js.

De storefront communiceert via de Storefront API (GraphQL). Hydrogen geeft je React components, server components, streaming SSR en volledige controle over de JavaScript-bundle.

// Hydrogen: React components, TypeScript, volledige controle
import { Image, Money } from '@shopify/hydrogen';
import type { ProductFragment } from 'storefrontapi.generated';

interface ProductCardProps {
  product: ProductFragment;
}

export function ProductCard({ product }: ProductCardProps) {
  const { title, featuredImage, priceRange } = product;

  return (
    <article className="product-card">
      {featuredImage && (
        <Image
          data={featuredImage}
          aspectRatio="1/1"
          sizes="(min-width: 45em) 400px, 100vw"
        />
      )}
      <h2>{title}</h2>
      <Money data={priceRange.minVariantPrice} />
    </article>
  );
}

Performance: wat de cijfers zeggen

Hydrogen heeft een hogere performance-ceiling dan Liquid. Maar performance is geen constante — het is een functie van implementatie.

Een slecht gebouwde Hydrogen-store presteert slechter dan een goed gebouwde Liquid-store. Dat is geen hypothese. Wij hebben beide varianten in productie gezien.

Wat Hydrogen technisch beter maakt:

• Streaming SSR — pagina's worden stuk voor stuk verstuurd. De browser kan al renderen terwijl de server nog data ophaalt
• React Server Components — JavaScript dat alleen server-side loopt, sturen geen code naar de browser
• Granulaire caching — per query, per route, per data-type, niet per pagina
• Code splitting — alleen de JavaScript die de huidige pagina nodig heeft wordt geladen

Wat in de praktijk het verschil maakt:

Maar een doorsnee Liquid theme haalt al een Lighthouse score van 80+ op desktop. Boven de 90 merk je het verschil voor de gebruiker amper.

Hydrogen is zinvol als je al een geoptimaliseerd Liquid theme hebt en tegen een performance-plafond aanloopt. Of als je een complexe storefront bouwt waar interactiviteit centraal staat.

Developer Experience: eerlijke vergelijking

Liquid is te leren in een dag. De syntax is eenvoudig, de documentatie goed en elk Shopify-thema-developer kent het.

Hydrogen vereist kennis van React, TypeScript, GraphQL en Remix. Dat is een ander niveau. Een junior die Liquid heeft geleerd, kan niet direct in Hydrogen werken.

# Liquid-project opzetten: 5 minuten
shopify theme init mijn-theme

# Hydrogen-project opzetten: 20 minuten + configuratie
npm create @shopify/hydrogen@latest
# Keuze: Oxygen hosting of eigen server?
# Keuze: TypeScript of JavaScript?
# Keuze: Welke starter template?
# Keuze: CSS framework?

De ontwikkelcyclus is ook anders. Bij Liquid push je naar een thema en zie je het direct in de Shopify Admin. Bij Hydrogen draai je een lokale dev-server en deploy je naar Oxygen of een eigen omgeving.

• Complexe interactieve componenten
• State-management over meerdere pagina's
• Integraties met externe APIs
• Custom checkout-flows

• Content-aanpassingen
• Standaard product- en collectiepagina's
• Thema-instellingen aanpassen
• Kleine iteraties zonder deployment

Kosten: de echte berekening

Dit is waar de meeste vergelijkingen tekort komen. Ze vergelijken alleen de hosting.

Initiële ontwikkelkosten

Een custom Liquid theme kost €8.000–25.000 afhankelijk van complexiteit.

Een vergelijkbare Hydrogen implementatie kost €20.000–60.000. De reden: meer engineeringuren, complexere architectuur en langere testcyclus.

Hosting

Liquid themes draaien op Shopify's platform. Geen extra hosting-kosten.

Hydrogen op Oxygen kost $0,30 per 100 requests + bandbreedtekosten. Voor een store met 50.000 bezoekers per maand is dat €40–80 per maand.

Op een eigen server (VPS, AWS, Cloudflare Workers) variëren de kosten sterk.

Onderhoud

Liquid: Shopify doet platform-updates automatisch. Je theme-developer doet periodieke updates voor breaking changes.

Hydrogen: Node.js dependencies, React-versies, Shopify Hydrogen-versies en Remix-versies vereisen actief onderhoud. Plan 1–2 updates per kwartaal.

Totaalkosten over 2 jaar (middelgrote store)

Het performance-verschil moet €30.500 extra omzet genereren om de investering te rechtvaardigen. Dat is reëel voor een store met meer dan €3 miljoen omzet per jaar.

Beslismatrix

Beantwoord deze vijf vragen:

Nee → Liquid. Ja → beide zijn haalbaar.

Nee → Liquid, tenzij je specifieke redenen hebt. Ja → overweeg Hydrogen.

Voorbeelden: custom configurator, real-time prijsberekening, complex filtermechanisme. Nee → Liquid. Ja → Hydrogen verdient serieuze overweging.

Dan heb je een implementatieprobleem, geen framework-probleem. Fix het bestaande theme eerst.

Nee → kies zorgvuldig. Ja → Liquid, tenzij je al een Hydrogen-codebase hebt.

Onze aanbeveling

Voor 85% van de Shopify-stores is Liquid de juiste keuze. Niet omdat Hydrogen slecht is, maar omdat de kosten en complexiteit van Hydrogen niet opwegen tegen de winst voor een gemiddelde store.

Hydrogen is een uitstekende keuze als je al een volwassen Shopify-store hebt, een React-team kunt inzetten en de performance-limiet van Liquid bereikt hebt.

Begin met Liquid. Migreer naar Hydrogen als de data daarvoor pleit. Voor de volledige Hydrogen-documentatie, zie shopify.dev/hydrogen.

• Shopify metafields en metaobjects — custom data inzetten in je theme
• Shopify Functions: server-side logica — checkout-logica zonder apps
• Shopify theme performance audit — 15-punten checklist

Wil je weten welke stack past bij jouw situatie? Bekijk onze Shopify-diensten of neem direct contact op — wij helpen je de juiste keuze maken op basis van jouw specifieke omzet, team en roadmap.