Im Shopify-Ökosystem herrscht ein Religionskrieg. Auf der einen Seite die Liquid Puristen. Sie argumentieren, dass Liquid robust, kostenlos und von Shopify gehostet ist. Warum es verkomplizieren? Auf der anderen Seite die Headless Architects. Sie argumentieren, dass Liquid ein Relikt aus dem Jahr 2010 sei, durch die Plattform eingeschränkt und nicht für moderne Erlebnisse geeignet sei.

Beide haben Recht. Beides ist falsch. Bei der Wahl geht es nicht um Technologie. Es geht um Wirtschaft. In diesem Artikel werden die genauen Gesamtbetriebskosten (TCO) der Umstellung auf Wasserstoff aufgeschlüsselt und erläutert, warum Marken, die einen GMV von über 20 Millionen US-Dollar erwirtschaften, selten bei Liquid bleiben.

Warum Maison Code darüber spricht

Bei Maison Code Paris fungieren wir als das architektonische Gewissen unserer Kunden. Wir übernehmen oft „moderne“ Stacks, die ohne grundlegendes Verständnis für Skalierung gebaut wurden.

Wir diskutieren dieses Thema, weil es einen kritischen Wendepunkt in der technischen Reife darstellt. Die korrekte Implementierung unterscheidet ein fragiles MVP von einer widerstandsfähigen Plattform auf Unternehmensniveau.

Die flüssige Decke

Liquid ist eine erstaunliche Vorlagensprache. Es rendert serverseitig, ist schnell und hat direkten Zugriff auf das „Store“-Objekt. Aber im Maßstab stößt es an eine harte Grenze.

1. Die „Apps“-Spaghetti

In einem Liquid-Theme ist jede Funktion eine „App“.

Benötigen Sie eine Wunschliste? Installieren Sie eine App (9 €/Monat).
Brauchen Sie Rezensionen? Installieren Sie eine App (99 €/Monat).
Benötigen Sie einen Bundle-Builder? Installieren Sie eine App (49 €/Monat).

Jede App fügt Folgendes ein:

Einzigartiges JavaScript: Normalerweise jQuery oder Vanilla JS, das mit anderen in Konflikt steht.
Einzigartiges CSS: Überschreiben Sie Ihre Stile mit „!important“.
Netzwerkanfragen: Ich habe Stores mit 82 separaten Skripten geprüft, die auf „window.load“ geladen wurden.

Das Ergebnis: Ein Leuchtturm-Score von 24. Man kann es nicht optimieren. Der Code wird auf dem Server des App-Entwicklers gehostet. Sie werden vom kleinsten gemeinsamen Nenner der Codequalität gefangen gehalten. (Vergleichen Sie dies mit Atomic Design).

2. Die Developer Experience (DX) Void

Flüssigkeit hat keine Typensicherheit. Liquid hat kein Komponentenmodell (Snippets sind keine Komponenten). Liquid hat keine Unit-Tests. Wenn Sie ein Snippet löschen, auf das in „theme.liquid“ verwiesen wird, bricht die Site zusammen. Professionelle Ingenieurteams können in Liquid nicht effektiv arbeiten. Verglichen mit der Präzision von React/TypeScript fühlt es sich an, als würde man MS Word-Dokumente bearbeiten.

Die Wasserstoffinvestition

Hydrogen ist das React-basierte Framework von Shopify, das auf Remix basiert. Es verwendet React Server Components (RSC), um Servergeschwindigkeit mit Client-Interaktivität zu kombinieren. Aber es ist teuer.

Die Kosten des Baus

Liquid Store: Agenturaufbau im Wert von 50.000 bis 100.000 US-Dollar.
Wasserstoffspeicher: Agenturbau im Wert von 200.000 bis 500.000 US-Dollar.

Die Wartungskosten

Flüssigkeit: 1 Junior-Entwickler (60.000 €/Jahr).
Wasserstoff: 2 leitende Reaktionsingenieure (300.000 USD/Jahr).

Warum also?

Der ROI von Headless

Man kauft keinen Ferrari, um Pizza auszuliefern. Man kauft es, um Rennen zu gewinnen. Wasserstoff amortisiert sich in drei spezifischen Vektoren.

Vektor 1: Leistung = Konvertierung

Wir haben eine 50-Millionen-Dollar-Modemarke von Liquid auf Hydrogen umgestellt.

LCP (Largest Contentful Paint): 2,4 s -> 0,8 s (Siehe Web Performance Standards).
CLS (Cumulative Layout Shift): 0,15 -> 0,00.
Conversion-Rate: +18 %.

Die Mathematik: 50 Mio. € * 18 % = 9 Mio. € zusätzlicher Umsatz. Engineering-Kosten = 300.000 US-Dollar. ROI = 2.900 %.

Vektor 2: Die „unmögliche“ UX

Liquid kann nicht:

Bestandszusammenführung mehrerer Filialen (Zusammenführung von US- und CA-Lagern in einer Ansicht).
3D-Konfigurator mit Preisaktualisierungen in Echtzeit und komplexer Logik.
Sofortige Übergänge zwischen Seiten im „Netflix-Stil“ (SPA-Navigation).

Mit Hydrogen schreiben Sie gerade React. Wenn Sie es sich vorstellen können, können Sie es bauen. Der „Bundle Builder“ ist keine 49-Dollar-App. Es handelt sich um eine React-Komponente, die Sie besitzen, optimieren und testen.

„tsx // Wasserstoff ermöglicht komplexes, typsicheres Abrufen von Daten Asynchronen Funktionslader exportieren({context, params}: LoaderFunctionArgs) { const {storefront} = context; const {product} = waiting storefront.query(PRODUCT_QUERY, { Variablen: {handle: params.handle}, });

if (!product) throw new Response(‘Not Found’, {status: 404});

// Einzigartige Logik: Echtzeitinventar von separater Redis-Instanz abrufen const inventory = waiting redis.get(stock:€{product.id});

return json({product, inventory}); }

Funktion ProductPage() { const {product, inventory} = useLoaderData();

zurück (

<AddToCartButton verfügbar={Inventar > 0} onClick={() => trackEvent(‘add_to_cart’)} />

); } „

Vektor 3: Herstellerunabhängigkeit

In Liquid sind Sie mit dem App Store verheiratet. Bei Hydrogen sind Sie mit der API verheiratet.

Du magst Yotpo nicht? Tauschen Sie den API-Aufruf zu Okendo aus. Die Benutzeroberfläche impliziert nichts.
Magst du Algolia nicht? Wechseln Sie zu Typesense. Das Glas gehört Ihnen.

Architekturdiagramm: Die Trennung von Belangen

Der Hauptunterschied ist die „BFF“-Schicht (Backend for Frontend).

„Meerjungfrau Diagramm TD Benutzer[Benutzerbrowser] <—>|RSC Payload| Edge[Oxygen Edge Network]

Unterabschnitt „Die Anwendung (Wasserstoff)“
    Kante ->|Laden| Reagieren[Reagieren Sie auf Serverkomponenten]
    Reagieren ->|Cache| KV[Sauerstoff-KV-Cache]
Ende

Unterabschnitt „Die Datenschicht“
    Reagieren ->|Abfrage| Storefront[Shopify Storefront API]
    Reagieren ->|Abfrage| CMS[Sanity CMS]
    Reagieren ->|Abfrage| PIM[Akeneo PIM]
Ende

„

9. Hosting: Oxygen vs. Vercel

Wo betreiben Sie Wasserstoff? Option A: Shopify Oxygen.

In Shopify Plus enthalten.
Keine Ausgangsgebühren.
Enge Integration mit der Shopify Storefront API (private Netzwerkgeschwindigkeit).
Nachteile: Kleineres Knotennetzwerk als Vercel.

Option B: Vercel.

Schnelleres Edge-Netzwerk.
Bessere DX (Vorschaubereitstellungen).
Nachteile: Teuer für hohe Bandbreite.

Urteil: Beginnen Sie mit Sauerstoff. Es ist „Kostenlos“ (in Plus enthalten). Wechseln Sie zu Vercel, wenn Sie eine bestimmte Edge-Middleware-Logik benötigen, die Oxygen noch nicht unterstützt.

10. Die Migrationsstrategie (Strangler Pattern)

Schreiben Sie nicht die gesamte Website auf einmal neu. Verwenden Sie das Würgefeigenmuster.

Stellen Sie Wasserstoff auf „shop.brand.com“ bereit.
Leiten Sie den Datenverkehr für „/products/*“ an Hydrogen weiter.
Keep Home und Collections on Liquid („www.brand.com“).
Migrieren Sie langsam jeweils einen Seitentyp.
Stellen Sie abschließend DNS auf Wasserstoff um. Dies verringert das Risiko des Starts. Sie messen die Konvertierung auf der neuen Produktseite, bevor Sie die gesamte Neugestaltung in Angriff nehmen.

12. Die Talentlücke (Einstellungsrealität)

Einen Liquid Dev zu engagieren ist einfach (60.000 €). Es gibt Millionen. Es ist schwierig, einen Wasserstoffentwickler einzustellen. Sie benötigen einen „React Engineer mit E-Commerce-Kontext“. Sie verlangen mehr als 150.000 US-Dollar. Der spezialisierte Liquid-Entwickler ist jedoch eine „Sackgasse“. Der React-Entwickler bringt Best Practices aus dem breiteren Technologie-Ökosystem (Testen, TypeScript, CI/CD) mit. Sie zahlen für Softwareentwicklung, nicht nur für „Theme Tweaking“. Dadurch steigern Sie die Qualität Ihres gesamten digitalen Auftritts.

13. Caching-Strategien für Serverkomponenten

RSC ist schnell, aber DB-Aufrufe sind langsam. Wasserstoff beinhaltet Sauerstoff-Cache. Wir implementieren „Stale-While-Revalidate“-Muster. const product =awaitcache.get('product', strategy: swr(60)). Dadurch wird das veraltete Produkt sofort (0 ms) bereitgestellt und anschließend im Hintergrund aktualisiert. Wir verwenden auch Sub-Request Caching. Wir speichern das „Menü“ für 1 Stunde, den „Preis“ jedoch für 1 Sekunde. Diese granulare Kontrolle ist in Liquid nicht möglich (wo die gesamte Seite oder gar nichts zwischengespeichert wird).

14. Fazit

Wenn Ihr GMV weniger als 5 Millionen US-Dollar beträgt, bleiben Sie bei Liquid. Der Aufwand für die Verwaltung einer React-Anwendung, die Einrichtung von CI/CD, die Behandlung von Hydratationsfehlern und die Verwaltung der Cache-Invalidierung ist enorm. Flüssigkeit ist „batteriebetrieben“. Es funktioniert einfach. Wasserstoff ist ein „Kernreaktor“. Unendliche Kraft, aber wenn man die Kühlstäbe nicht in den Griff bekommt, schmilzt es.

Die Checkliste

Haben Sie einen internen React Engineer? (Erforderlich)
Ist Ihr LCP derzeit > 2,5 s?
Geben Sie mehr als 2.000 US-Dollar pro Monat für Shopify-Apps aus, nur um die Benutzeroberfläche zu optimieren?
Ist Ihr GMV > 10 Mio. USD?

Wenn Sie alle mit JA beantwortet haben, willkommen bei Hydrogen.

Fazit

Liquid ist für Händler. Wasserstoff ist für Marken. Ein Händler verkauft Produkte. Eine Marke verkauft ein Erlebnis. Wenn die Erfahrung zum Unterscheidungsmerkmal wird, wird die Reibung von Liquid teurer als das Gehalt des React Engineers.

Beauftragen Sie unsere Architekten.