Dans l’écosystème Shopify, il y a une guerre de religion. D’un côté, les Puristes Liquides. Ils soutiennent que Liquid est robuste, gratuit et hébergé par Shopify. Pourquoi compliquer les choses ? De l’autre côté, les Headless Architects. Ils soutiennent que Liquid est une relique de 2010, limitée par la plateforme et incapable d’expériences modernes.

Les deux ont raison. Les deux ont tort. Le choix n’est pas une question de technologie. Il s’agit d’économie. Cet article détaille le coût total de possession (TCO) exact du passage à l’hydrogène et pourquoi les marques générant plus de 20 millions de dollars de GMV restent rarement sur Liquid.

Pourquoi Maison Code en parle

Chez Maison Code Paris, nous agissons comme la conscience architecturale de nos clients. Nous héritons souvent de stacks “modernes” construites sans compréhension fondamentale de l’échelle.

Nous abordons ce sujet car il représente un point de pivot critique dans la maturité de l’ingénierie. Une mise en œuvre correcte différencie un MVP fragile d’une plateforme résiliente de niveau entreprise.

Le plafond liquide

Liquid est un langage de création de modèles incroyable. Il rend le rendu côté serveur, il est rapide et il a un accès direct à l’objet store. Mais cela atteint un plafond difficile à grande échelle.

1. Les spaghettis « Apps »

Dans un thème Liquid, chaque fonctionnalité est une « application ».

Besoin d’une liste de souhaits ? Installez une application (9 €/mois).
Besoin d’avis ? Installez une application (99 €/mois).
Besoin d’un constructeur de bundles ? Installez une application (49 €/mois).

Chaque application injecte :

JavaScript unique : généralement jQuery ou Vanilla JS qui entre en conflit avec d’autres.
CSS unique : remplacement de vos styles par !important.
Demandes réseau : j’ai audité des magasins avec 82 scripts distincts chargés sur window.load.

Le résultat : un score Lighthouse de 24. Vous ne pouvez pas l’optimiser. Le code est hébergé sur le serveur du développeur d’applications. Vous êtes pris en otage par le plus petit dénominateur commun de la qualité du code. (Comparez cela avec Atomic Design).

2. Le vide de l’expérience développeur (DX)

Le liquide n’a aucune sécurité de type. Liquid n’a pas de modèle de composant (les extraits de code ne sont pas des composants). Liquid n’a pas de tests unitaires. Si vous supprimez un extrait référencé dans « theme.liquid », le site se bloque. Les équipes d’ingénieurs professionnels ne peuvent pas travailler efficacement dans Liquid. Cela ressemble à l’édition de documents MS Word par rapport à la précision de React/TypeScript.

L’investissement dans l’hydrogène

Hydrogen est le framework basé sur React de Shopify, construit sur Remix. Il utilise React Server Components (RSC) pour combiner la vitesse du serveur avec l’interactivité du client. Mais c’est cher.

Le coût de la construction

Magasin liquide : 50 000 € - 100 000 € de création d’agence.
Magasin d’hydrogène : 200 000 € - 500 000 € de création d’agence.

Le coût de la maintenance

Liquide : 1 développeur junior (60 000 €/an).
Hydrogène : 2 ingénieurs React senior (300 000 €/an).

Alors pourquoi faire ça ?

Le retour sur investissement du Headless

On n’achète pas une Ferrari pour livrer des pizzas. Vous l’achetez pour gagner des courses. L’hydrogène s’amortit dans trois vecteurs spécifiques.

Vecteur 1 : Performance = Conversion

Nous avons migré une marque de mode de 50 millions de dollars de Liquid vers Hydrogen.

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

Les mathématiques : 50 M€ * 18 % = 9 M€ de revenus supplémentaires. Coût de l’ingénierie = 300 000 €. ROI = 2 900 %.

Vecteur 2 : L’UX “impossible”

Le liquide ne peut pas faire :

Mélange d’inventaires multi-magasins (fusion des entrepôts américains et américains en une seule vue).
Configurateur 3D avec mises à jour de prix en temps réel impliquant une logique complexe.
Transitions instantanées “à la Netflix” entre les pages (navigation SPA).

Avec Hydrogen, vous écrivez simplement React. Si vous pouvez l’imaginer, vous pouvez le construire. Le “Bundle Builder” n’est pas une application à 49 €. Il s’agit d’un composant React que vous possédez, optimisez et testez.

// Hydrogen facilite la récupération de données complexes et sécurisées
exporter le chargeur de fonctions asynchrones ({context, params} : LoaderFunctionArgs) {
  const {vitrine} = contexte ;
  const {produit} = attendre storefront.query(PRODUCT_QUERY, {
    variables : {handle : params.handle},
  });

  if (!product) lance une nouvelle réponse ('Not Found', {statut : 404});

  // Logique unique : récupérer l'inventaire en temps réel à partir d'une instance Redis distincte
  const inventaire = attendre redis.get(`stock:${product.id}`);

  return json({produit, inventaire});
}

fonction PageProduit() {
  const {produit, inventaire} = useLoaderData<typeof loader>();
  
  retour (
    <div className="product-grid">
      <VariantSelector options={product.options} />
      <AjouterAuBoutonCart 
        disponible={inventaire > 0} 
        onClick={() => trackEvent('add_to_cart')} 
      />
    </div>
  );
}

Vecteur 3 : Indépendance du fournisseur

Dans Liquid, vous êtes marié à l’App Store. Chez Hydrogen, vous êtes marié à l’API.

Vous n’aimez pas Yotpo ? Échangez l’appel API vers Okendo. L’interface utilisateur n’implique rien.
Vous n’aimez pas Algolia ? Passez à Typesense. Vous possédez le verre.

Schéma architectural : La séparation des préoccupations

La principale différence réside dans la couche “BFF” (Backend for Frontend).

graph TD
    Utilisateur[Navigateur utilisateur] <-->|Charge utile RSC| Edge[Réseau Edge Oxygène]
    
    sous-graphe "L'Application (Hydrogène)"
        Bord -->|Charger| Réagir[Composants du serveur React]
        Réagir -->|Cache| KV [Cache KV oxygène]
    fin
    
    sous-graphe "La couche de données"
        Réagir -->|Requête| Vitrine de magasin [API Shopify Storefront]
        Réagir -->|Requête| CMS[Santé CMS]
        Réagir -->|Requête| PIM[Akeneo PIM]
    fin

9. Hébergement : Oxygène vs Vercel

Où utilisez-vous l’hydrogène ? Option A : Shopify Oxygène.

Inclus dans Shopify Plus.
Zéro frais de sortie.
Intégration étroite avec l’API Shopify Storefront (vitesse du réseau privé).
Inconvénients : réseau de nœuds plus petit que Vercel.

Option B : Vercel.

Réseau Edge plus rapide.
Meilleur DX (déploiements d’aperçu).
Inconvénients : Cher pour une bande passante élevée.

Verdict : Commencez avec Oxygène. C’est “Gratuit” (inclus dans Plus). Passez à Vercel si vous avez besoin d’une logique Edge Middleware spécifique qu’Oxygen ne prend pas encore en charge.

10. La stratégie de migration (modèle étrangleur)

Ne réécrivez pas tout le site d’un coup. Utilisez le Modèle de figue étrangleur.

Déployez Hydrogen sur « shop.brand.com ».
Acheminez le trafic pour /products/* vers Hydrogen.
Gardez la maison et les collections sur Liquid (www.brand.com).
Migrez lentement un type de page à la fois.
Enfin, passez DNS à Hydrogen. Cela réduit les risques du lancement. Vous mesurez la conversion sur la nouvelle page produit avant de vous engager dans l’intégralité de la reconstruction.

12. L’écart de talents (réalité de l’embauche)

Embaucher un Liquid Dev est facile (60 000 €). Il y en a des millions. Embaucher un développeur d’hydrogène est difficile. Vous avez besoin d’un “Ingénieur React avec contexte E-commerce”. Ils commandent plus de 150 000 €. Cependant, le développeur spécialisé Liquid est une carrière « sans issue ». Le développeur React apporte les meilleures pratiques de l’écosystème technologique plus large (Testing, TypeScript, CI/CD). Vous payez pour l’Ingénierie logicielle, pas seulement pour le “Thème Tweaking”. Cela améliore la qualité de l’ensemble de votre présence numérique.

13. Stratégies de mise en cache des composants du serveur

RSC est rapide, mais les appels DB sont lents. L’hydrogène inclut Oxygen Cache. Nous implémentons des modèles « Stale-While-Revalidate ». const produit = wait cache.get('product', stratégie : swr(60)). Cela sert instantanément le produit obsolète (0 ms), puis le met à jour en arrière-plan. Nous utilisons également Sub-Request Caching. Nous mettons en cache le « Menu » pendant 1 heure, mais le « Prix » pendant 1 seconde. Ce contrôle granulaire est impossible dans Liquid (qui met en cache toute la page ou rien).

14. Conclusion

Si vous faites un GMV <5 millions de dollars, restez sur Liquid. Les frais généraux liés à la gestion d’une application React, à la configuration de CI/CD, à la gestion des erreurs d’hydratation et à la gestion de l’invalidation du cache sont énormes. Le liquide fonctionne sur batterie. Cela fonctionne. L’hydrogène est un « réacteur nucléaire ». Une puissance infinie, mais si on ne gère pas les tiges de refroidissement, ça fond.

La liste de contrôle

Avez-vous un ingénieur React en interne ? (Obligatoire)
Votre LCP est-il actuellement > 2,5 s ?
Dépensez-vous > 2 000 €/mois sur les applications Shopify uniquement pour des ajustements de l’interface utilisateur ?
Votre GMV est-il > 10 millions de dollars ?

Si vous avez répondu OUI à toutes les questions, bienvenue chez Hydrogen.

Conclusion

Le liquide est destiné aux marchands. L’hydrogène est réservé aux marques. Un commerçant vend des produits. Une marque vend une expérience. Lorsque l’expérience devient le différenciateur, la friction de Liquid devient plus chère que le salaire de l’ingénieur React.

Engagez nos Architectes.