Shopify Hydrogen: headless commerce explained simply

Beyond themes: custom commerce

Shopify Hydrogen is Shopify’s React framework pour construire des storefronts headless. Il sépare le front-end (l’interface que voit le client) du back-end Shopify (gestion des produits, commandes, paiements). Cette architecture offre une liberté totale sur l’expérience utilisateur tout en conservant la puissance du back-end Shopify. Hydrogen est hébergé sur Oxygen, l’infrastructure edge de Shopify, pour des performances optimales.

How headless architecture works

In a standard Shopify architecture, le thème et le back-end sont couplés. Le thème utilise le langage Liquid pour afficher les données. Les personnalisations sont limitées par les capacités de Liquid et la structure du thème.

With Hydrogen, the front-end is an independent React application indépendante qui communique avec Shopify via la Storefront API (GraphQL). Vous avez un contrôle total sur chaque pixel de l’interface. Les animations, les interactions et la navigation sont entièrement personnalisables.

Oxygen, Shopify’s edge hosting platform, déploie votre storefront Hydrogen sur des serveurs proches de vos clients dans le monde entier. Le rendu côté serveur (SSR) avec streaming garantit des temps de chargement rapides.

Advantages of Hydrogen

Performance is the most measurable advantage. Hydrogen utilise React Server Components pour minimiser le JavaScript envoyé au navigateur. Le streaming SSR affiche le contenu progressivement, ce qui améliore le Largest Contentful Paint (LCP) et les Core Web Vitals.

Creative flexibility is the other major advantage. Vous n’êtes plus limité par la structure d’un thème. Les pages produit, les collections et le checkout peuvent avoir des designs radicalement différents. Les expériences interactives (configurateurs de produit, visualisation 3D, parcours guidés) sont possibles.

Limitations to know

Hydrogen requires React and GraphQL development skills et GraphQL. Le coût de développement et de maintenance est significativement plus élevé qu’un thème Shopify classique. Les mises à jour de Shopify ne se propagent pas automatiquement au front-end, ce qui nécessite une maintenance continue.

The Shopify app ecosystem is partially compatible. Les applications qui modifient le front-end (pop-ups, widgets, avis) ne fonctionnent pas directement avec Hydrogen. Elles doivent être intégrées manuellement via leurs API.

Who is Hydrogen for?

Hydrogen is suited for brands qui ont des exigences de design uniques, un budget de développement conséquent et une équipe technique capable de maintenir une application React. Les marques de luxe, les DTC (Direct-to-Consumer) avec une identité forte et les marketplaces complexes sont les cas d’usage typiques.

For the majority des PME et des commerçants, les thèmes Shopify 2.0 avec les sections personnalisables offrent un excellent compromis entre flexibilité et simplicité. Le rapport coût-bénéfice d’Hydrogen ne se justifie que pour des projets avec des exigences spécifiques.

LCMH, a Shopify partner in Alsace, helps you evaluate whether Hydrogen is right for your project.

For SEO fundamentals, read our guide SEO pour Shopify.

Sources

1. Shopify, Hydrogen. hydrogen.shopify.dev
2. Shopify, Oxygen Hosting. shopify.dev/docs/custom-storefronts/oxygen
3. Shopify, Storefront API. shopify.dev/docs/api/storefront