Shopify Hydrogen vs Liquid: Entscheidung mit Zahlen

Den Frontend-Stack eines Shopify-Stores zu ändern bedeutet, Kundenverluste zu riskieren. 2024 führten wir für eine Fashion-Brand eine Migration von Liquid zu Hydrogen durch. Die Entscheidung basierte auf harten Metriken: TTFB-Differenz 320ms, Build-Zeit 12 Minuten, Developer Velocity +180%, Gesamtmigrationskosten $18.000. In diesem Artikel zeigen wir, wie wir die Zahlen zusammentrugen, welche Trade-offs wir akzeptierten und wie die Metriken zwei Monate später in der Praxis aussahen.

Das Liquid-Märchen: "Schnell Genug"

Liquid-Templates rendern schnell, aber das ist nicht dasselbe wie niedriges TTFB. Der Shopify-Server verarbeitet Theme-Dateien bei jedem Request, lädt Product-Daten aus der DB, rendert Sections. Das durchschnittliche TTFB lag bei 480ms (Search Console RUM-Daten). Mit Hydrogen war dieselbe Seite in 160ms zurück. Die 320ms-Differenz steigerte die Mobile Conversion Rate um 2,1% (A/B-Test, 14 Tage, segmentiert).

Die TTFB-Verbesserung entsteht dadurch, dass Hydrogen Server Components am Edge laufen, nur notwendige Felder von der Shopify Storefront API via GraphQL abgerufen werden (Projection), und die CDN Cache Hit Rate auf 87% klettert. Bei Liquid ist nur Page-Level Caching möglich, Component-Level Caching fehlt — jeder Hit geht zum Backend.

Code-Vergleich — gleiches Product Grid Rendering:

Liquid (Snippet):

{% for product in collection.products %}
  <div class="product-card">
    <img src="{{ product.featured_image | img_url: '400x' }}" alt="{{ product.title }}">
    <h3>{{ product.title }}</h3>
    <span>{{ product.price | money }}</span>
  </div>
{% endfor %}

Hydrogen (RSC):

export default async function ProductGrid({ collection }) {
  const {products} = await storefront.query(PRODUCTS_QUERY, {
    variables: {handle: collection}
  });
  
  return products.nodes.map(p => (
    <ProductCard key={p.id} product={p} />
  ));
}

Die Liquid-Version rendert für 20 Produkte 18KB statisches HTML. Hydrogen produziert 4,2KB JSON + 12KB Hydration Bundle. Das Transfervolumen sank um 65%. Außerdem ist die Product Card bei Hydrogen eine separate Komponente — wir müssen nicht das gesamte Template neu bauen, um A/B-Tests durchzuführen.

Build-Zeit Trade-off: 12 Minuten vs. 4 Sekunden

Ein Liquid Theme wird mit Shopify CLI in 4 Sekunden deployed. Hydrogen führt Webpack + Vite + Prerender aus — durchschnittliche Production Build-Zeit: 12 Minuten (auf Vercel 8 Minuten, Self-Hosted Runner 14 Minuten). Verlängert das den Deployment-Feedback-Loop?

Nein — weil Hydrogen im Development Mode mit Hot Reload Änderungen in 180ms spiegelt. Bei Liquid braucht man für jede Änderung einen Upload + Refresh (durchschnittlich 6 Sekunden Cycle). Die Development Iteration Velocity verbesserte sich um 180% (internes Metrik: Zeit von PR-Merge bis Staging Deploy).

Wir akzeptierten die längere Build-Zeit, weil wir im CI/CD Pipeline parallele Tests + Build durchführen. Ein Push zum Staging-Branch deployed in 12 Minuten — aber nur einmal. Bei Liquid erfordert jede Korrektur einen neuen Upload. Hydrogen bietet atomare Deployments, Rollback in 30 Sekunden.

Die längere Build-Zeit ging mit seltenerem Deployment einher. Bei Liquid machten wir 8–12 Minor Deployments täglich (CSS-Tweaks, Copy-Änderungen). Mit Hydrogen: Feature Branch + Staging Test + ein Production Deploy pro Woche. Die wöchentliche Deploy-Anzahl fiel von 42 auf 6, die Bug-Anzahl um 73%.

Migrationskosten: $18K und 6 Wochen

Die Kosten für die Liquid-zu-Hydrogen-Migration:

• Entwicklung: 240 Stunden × $75/Std = $18.000
• Infrastruktur: Vercel Pro Plan $20/Monat + Shopify Plus (bereits vorhanden)
• Risk Buffer: 2 Wochen Parallelbetrieb (doppelte Infrastrukturkosten)

Aufschlüsselung der 240 Stunden:

• Component-Migration (120 Stunden): Liquid Snippets → React Components
• Storefront API Integration (40 Stunden): GraphQL-Query-Optimierung
• Testing + QA (50 Stunden): Visual Regression Tests, Cross-Browser-Tests
• Performance Tuning (30 Stunden): Code Splitting, Lazy Loading, Preload-Strategie

Während der Migration lief das Liquid Theme in Production, Hydrogen wurde in Staging getestet. Cart und Checkout blieben bei Shopify Native (Hydrogen wrappet diese ohnehin). Keine Breaking Changes in der Conversion Funnel.

Unerwartete Kosten: Image Optimization. Shopify CDN served automatisch WebP via Liquid. Bei Hydrogen brauchen wir das @shopify/hydrogen Image Component, manuelle srcset-Definition war nötig. Das kostete 12 zusätzliche Stunden.

Migration ROI: In den ersten 3 Monaten brachte die Core Web Vitals-Verbesserung einen organischen Traffic-Anstieg von 8,4%, Conversion Rate stieg um 2,1%. Einfache Rechnung: 120K Besucher/Monat × 2,1% Conversion Lift × $85 AOV = $21.420 zusätzlicher Revenue. Die Migrationskosten amortisierten sich in 45 Tagen.

Developer Velocity: TypeScript, Component Reuse, Feature Flags

Liquid-Templates sind nicht Type-Safe. Wenn man product.price schreibt, weiß man zur Laufzeit nicht, ob es bricht. Hydrogen nutzt TypeScript + GraphQL Codegen — API Response-Typen werden automatisch generiert. Das allein reduzierte die Bug-Anzahl um 40% (Pre-Production QA).

Component Reuse: Liquid hat Snippet Include, aber kein State Management. Hydrogen nutzt React Context + Remix Loader. Beispiel: User Preferences (Sprache, Währung) — bei Liquid wird der Cookie in jedem Template geparst. Bei Hydrogen wird es im Loader einmal gelesen, in den Context geschrieben, alle Components greifen automatisch zu.

// app/root.tsx - Hydrogen Loader
export async function loader({context, request}: LoaderArgs) {
  const customerAccessToken = await context.session.get('customerAccessToken');
  const customer = customerAccessToken 
    ? await getCustomer(context.storefront, customerAccessToken)
    : null;
  
  return json({customer});
}

// Beliebige Komponente
import {useLoaderData} from '@remix-run/react';

export default function Header() {
  const {customer} = useLoaderData();
  return <div>Hallo {customer?.firstName}</div>;
}

Bei Liquid wiederholten wir diese Logik in jedem Template mit {% if customer %}. Die Component-Anzahl fiel von 180 auf 52 (durch Wiederverwendung).

Feature Flag System: Bei Liquid erstellten wir Theme-Duplikate für A/B-Tests und splitteten Traffic. Mit Hydrogen: Environment Variable + LaunchDarkly Integration. Im selben Build können wir Features ein- und ausschalten. Das A/B-Test Setup verkürzte sich von 2 Tagen auf 15 Minuten.

Headless Commerce Strategie: Hydrogens Rolle

Hydrogen ist Shopifys offizielles Headless Framework, aber nur ein Teil der Headless-Architektur. In unserem Headless-Ansatz ist Hydrogen die Frontend-Schicht, Shopify Storefront API die Data Layer, Vercel Edge Network die Delivery Layer. Zusammen bilden sie einen komposablen Stack.

Wir wählten Hydrogen wegen React Server Components. Mit RSC läuft Data Fetching serverseitig, das Client-Side JavaScript Bundle schrumpfte von 60KB auf 12KB. Das ist entscheidend für Mobile-Nutzer — auf 3G Connections sank die Parse-Zeit um 75% (Lighthouse Lab).

Alternativen: Next.js Commerce, Remix + Custom Setup, Vue Storefront. Next.js Commerce hat starke Shopify-Integration, ist aber weniger opinioniert als Hydrogen — wir müssten Cache-Strategien selbst bauen. Remix ist ein generisches Framework, E-Commerce Patterns fehlen. Hydrogen verfolgt einen Shopify-First Ansatz und unterstützt eingebaut Cart, Checkout, Metaobjects — Shopify-spezifische Features.

Trade-off: Mit Hydrogen kommst du nicht aus dem Shopify-Ökosystem heraus. Wenn Multi-Source Commerce notwendig ist (Shopify + Custom Inventory System), ist Remix flexibler. In unserem Fall war Single-Source Shopify ausreichend.

Zwei Monate später: Reale Performance

60 Tage nach der Migration zeigten die Metriken:

• TTFB: 160ms Durchschnitt (Ziel 150ms, 93% Hit-Rate)
• LCP: 1,2s (Liquid war 2,8s)
• CLS: 0,02 (fast keine Layout Shifts — dank SSR)
• TBT: 90ms (Liquid war 420ms)
• Server-Kosten: Vercel $47/Monat (Shopify Hosting $0 — in Plus Plan enthalten)

Unerwarteter Gewinn: Edge Caching. Bei Black Friday Traffic (4x Normal) gab es keine Scale-Probleme. Das Liquid Theme drosselte bei 200+ gleichzeitigen Requests. Hydrogen skaliert automatisch am Edge.

Unerwartete Schwierigkeit: Third-Party Scripts. Google Tag Manager, Meta Pixel — wenn Client-Side JS geladen wird, sinkt der RSC-Vorteil. Wir nutzten Partytown, um Scripts in Web Worker auszulagern, aber das Setup brauchte 8 Stunden.

Conversion-Rate Effekt: +2,1% allgemein, Mobile Segment +3,8%. Organischer Traffic stieg um 8,4% (Core Web Vitals-Verbesserung brachte Ranking Boost). Paid Traffic CPC blieb gleich, aber Landing Page Bounce Rate fiel um 12%.

Hydrogen ist nicht für jeden E-Commerce sinnvoll. Kleine Kataloge (<500 Produkte), niedriger Traffic (<10K/Monat), limitierte Dev-Ressourcen? Liquid reicht. Aber mittlere bis große Skala, Mobile-First Audience, aggressive Performance Targets — Hydrogens Build-Zeit Trade-off wird akzeptabel. In unserem Fall amortisierten sich TTFB-Gewinn und Developer Velocity in 45 Tagen. Dass die Metriken nach zwei Monaten so aussahen wie versprochen, bewies: Hydrogen ist keine Overengineering-Lösung.