Wasserstoff vs. Flüssigkeit: Der Leitfaden für technische Architekten zur Migration

Wenn Sie CTO oder leitender Ingenieur sind, haben Sie wahrscheinlich die „Flüssigkeitsobergrenze“ erreicht. Liquid eignet sich hervorragend für einfache Geschäfte. Wenn Sie jedoch versuchen, komplexe Statusverwaltung, Personalisierung oder API-Integration von Drittanbietern zu implementieren, entsteht ein Durcheinander von „Spaghetti jQuery“. Shopify Hydrogen (basierend auf Remix) ist die Antwort. Es ist nicht nur ein „Thema“; Es handelt sich um eine Full-Stack-Anwendung.

Der Architekturwandel

In Liquid geschieht alles auf den Servern von Shopify. Sie haben nur begrenzte Kontrolle. Bei Wasserstoff besitzen Sie den Edge.

„Meerjungfrau Diagramm TD Benutzer[Benutzerbrowser] ->|Anfrage| Edge[Cloudflare Worker (Sauerstoff)]

Unterabschnitt „Ihre Anwendungslogik“
Edge ->|Cache-Prüfung| Cache{Ist zwischengespeichert?}
Cache -->|Ja| Benutzer
Cache -->|Nein| Remix[Remix Loader]
Ende

Remix -->|GraphQL| Storefront[Shopify Storefront API]
Remix ->|REST| Drittanbieter[ERP / CMS / PIM]

Storefront -> Remix
3rdParty -> Remix
Remix ->|HTML-Stream| Benutzer

„

Warum das wichtig ist

Mit Liquid können Sie nicht einfach Daten aus einem externen ERP abrufen, bevor die Seite gerendert wird. Sie müssen den clientseitigen Abruf (useEffect) verwenden, was zu Cumulative Layout Shift (CLS) und einer schlechten Benutzererfahrung führt. Mit Wasserstoff holen wir auf dem Server ab. Der Benutzer sieht sofort die vollständig gestaltete Seite mit ERP-Daten.

Funktionsvergleich: Die Grenzen der Flüssigkeit

Implementierungsleitfaden: Ihr erster Weg

In Liquid ist eine Produktseite eine riesige „product.liquid“-Datei. Bei Wasserstoff handelt es sich um ein sauberes Routenmodul.

„Typoskript // app/routes/($locale).products.$handle.tsx import { defer } from ‘@shopify/remix-oxygen’; import { Await, useLoaderData } from ‘@remix-run/react’;

// 1. Der Loader (Serverseite) Asynchronen Funktionslader exportieren({ params, context }: LoaderArgs) { const { handle } = params;

// Kritische Daten abrufen (darauf warten) const product = waiting context.storefront.query(PRODUCT_QUERY, { Variablen: { handle }, });

// Unkritische Daten abrufen (streamen) const reviews = context.yotpo.fetchReviews(product.id);

if (!product) throw new Response(null, { status: 404 });

return defer({ Produkt, Bewertungen }); }

// 2. Die Komponente (Client-Seite) Standardfunktion ProductPage() exportieren { const { Produkt, Bewertungen } = useLoaderData();

zurück (

  {/* 3. Spannung beim Streaming von Inhalten */}
  <Suspense fallback={<ReviewsSkeleton />}>
    <Warten auf Auflösung={Bewertungen}>
      {(data) => <ReviewsList data={data} />}
    </Warten>
  </Suspense>
</div>