Hydrogène vs liquide : le guide de l'architecte technique sur la migration

Si vous êtes CTO ou ingénieur principal, vous avez probablement atteint le « plafond liquide ». Le liquide est fantastique pour les magasins simples. Mais lorsque vous essayez de mettre en œuvre une gestion d’état complexe, une personnalisation ou une intégration d’API tierces, cela devient un gâchis de « Spaghetti jQuery ». Shopify Hydrogen (construit sur Remix) est la réponse. Il ne s’agit pas simplement d’un « thème » ; c’est une application full-stack.

Le changement d’architecture

Dans Liquid, tout se passe sur les serveurs de Shopify. Vous avez un contrôle limité. Dans Hydrogen, vous possédez le Edge.

graph TD
    Utilisateur[Navigateur utilisateur] -->|Demande| Edge[Cloudflare Worker (Oxygène)]
    
    sous-graphe "Votre logique d'application"
    Edge -->|Vérification du cache| Cache{Est-il mis en cache ?}
    Cache -->|Oui| Utilisateur
    Cache -->|Non| Remix[Chargeur de remix]
    fin
    
    Remixer -->|GraphQL| Vitrine de magasin [API Shopify Storefront]
    Remixer -->|REPOS| Tiers[ERP / CMS / PIM]
    
    Vitrine -> Remix
    Tiers -> Remix
    Remix -->|Flux HTML| Utilisateur

Pourquoi c’est important

Avec Liquid, vous ne pouvez pas facilement récupérer les données d’un ERP externe avant de rendre la page. Vous devez utiliser la récupération côté client (useEffect), ce qui entraîne un Cumulative Layout Shift (CLS) et une mauvaise expérience utilisateur. Avec Hydrogen, on récupère sur le serveur. L’utilisateur voit instantanément la page entièrement formée avec les données ERP.

Comparaison des fonctionnalités : les limites du liquide

Fonctionnalité	Liquide (héritage)	Hydrogène (Réagir/Remix)
Routage	Rigide (/products/*, /collections/*)	Dynamique (/products/color/blue)
Gestion de l’État	Aucun (dépendance au DOM)	Robuste (Contexte / Zustand)
Tests	Régression visuelle uniquement	Unité & E2E (Vitest/Dramaturge)
DX (expérience de développement)	Mauvais (retards de synchronisation Themekit)	Excellent (HMR, TypeScript)
Performances	Bon (mais incontrôlable)	Excellent (Streaming SSR)

Guide de mise en œuvre : votre premier itinéraire

Dans Liquid, une page produit est un énorme fichier « product.liquid ». Dans Hydrogen, c’est un module de route propre.

// app/routes/($locale).products.$handle.tsx
importer { defer } depuis '@shopify/remix-oxygen' ;
import { Attendez, useLoaderData } depuis '@remix-run/react' ;

// 1. Le chargeur (côté serveur)
exporter le chargeur de fonction asynchrone ({ params, contexte } : LoaderArgs) {
  const { handle } = paramètres ;
  
  // Récupère les données critiques (attendez)
  const produit = attendre contexte.storefront.query(PRODUCT_QUERY, {
    variables : {descripteur},
  });

  // Récupère les données non critiques (diffusez-les)
  const reviews = context.yotpo.fetchReviews(product.id);

  if (!product) lance une nouvelle réponse (null, { status: 404 });

  return différé({ produit, avis });
}

// 2. Le composant (côté client)
exporter la fonction par défaut ProductPage() {
  const { produit, avis } = useLoaderData();

  retour (
    <div className="product-grid">
      <ProductGallery media={product.media.nodes} />
      <ProductDetails title={product.title} price={product.priceRange} />
      
      {/* 3. Suspense pour le contenu en streaming */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <Attendez la résolution={reviews}>
          {(données) => <ReviewsList data={data} />}
        </Attendez>
      </Suspense>
    </div>
  );
}

Stratégie de migration : le modèle de l’étrangleur

Ne reconstruisez pas l’intégralité de votre site en un jour. Utilisez le Modèle de figue étrangleur.

1. Phase 1 : lancez Hydrogen sur un sous-domaine (experimental.brand.com).
2. Phase 2 : acheminez le trafic de la « Nouvelle collection » vers Hydrogen via Cloudflare Workers.
3. Phase 3 : Conservez le paiement et le compte sur Liquid (pour l’instant). This reduces risk to near zero.

Conclusion

Le liquide est un plafond. L’hydrogène est un plancher. Si vous envisagez de passer à plus de 50 millions de dollars, vous avez besoin du plancher.

---

---

Frapper le plafond ?

Nous sommes spécialisés dans les migrations d’hydrogène haute performance. Engagez nos Architectes.