Shopify Hydrogen × Next.js — Migration headless DNVB scale-up

#Quand choisir Shopify Hydrogen plutôt que Medusa, CommerceLayer ou un custom

On nous pose cette question à chaque cadrage avec une DNVB scale-up. Voici le filtre de décision que nous appliquons.

Shopify Hydrogen est le bon choix si trois conditions sont réunies. Premièrement, tu es déjà sur Shopify (Liquid ou Plus) — l'écosystème Shopify (paiements, fulfillment, apps, admin) fonctionne, ton équipe le maîtrise, ton équipe finance a déjà calibré les coûts commerciaux Shopify (frais de transaction selon le plan).

Deuxièmement, ton chiffre d'affaires justifie un projet headless — en dessous, Liquid suffit ; au-delà d'un certain volume, la facture Shopify Plus devient pénalisante face à Medusa self-hosted ou CommerceLayer. Troisièmement, ton ambition est claire sur mobile, SEO ou international — c'est là que le headless donne son maximum.

Medusa.js redevient pertinent dès que tu veux une souveraineté infrastructure (self-hosting obligatoire, hébergement OVH ou Scaleway souverain), une customisation backend extrême (workflows commande très spécifiques, tarification B2B complexe par compte) ou que tu refuses tout frais commercial Shopify. C'est notre choix par défaut pour les distributeurs B2B industriels.

CommerceLayer prend le relais pour les retailers omnicanaux multi-marques multi-pays avec un catalogue très volumineux, où l'orchestration API-first multi-tenant compte plus que l'intégration ecosystem Shopify.

Un custom Payload CMS + Stripe reste valable pour les cas vraiment hors-norme : marketplace verticale, modèle d'abonnement complexe, NFT commerce, voice commerce expérimental.

#Cas DNVB scale-up : pourquoi Hydrogen est souvent le bon choix

Sur ce segment précis, Hydrogen est souvent le meilleur choix pour trois raisons. L'intégration native Shopify est imbattable : Shopify Payments, Shopify Fulfillment Network, Shopify Flow, Shopify Email, et l'app store entier (Klaviyo, Loop Returns, Yotpo, Recharge) continuent de fonctionner sans adapter une seule ligne de code. Tu ne refais que la couche présentation.

La courbe d'apprentissage équipe est faible : ton équipe marketing connaît déjà l'admin Shopify. Pas de re-formation interne. Pas de migration de données. Pas de mois de doublonnage outils.

Enfin, Hydrogen Remix + le runtime edge Oxygen donnent de très bons Core Web Vitals sans effort particulier. C'est ce qui peut débloquer la conversion mobile sur laquelle une DNVB scale-up plafonne en Liquid.

#Avantages techniques de Shopify Hydrogen

Intégration native Shopify ecosystem complète. Shopify Payments reste intact (PCI-DSS level 1 géré, multi-pays, multi-devises, Apple Pay / Google Pay / Shop Pay activés rapidement). Shopify Fulfillment Network fonctionne sans adaptation. Toutes les apps de l'app store restent compatibles : Klaviyo pour l'email, Loop Returns pour les retours, Yotpo pour les avis, Recharge pour l'abonnement, Gorgias pour le support. Tu ne perds rien.

Core Web Vitals. Hydrogen tourne sur Oxygen, le runtime edge de Shopify. Combiné avec Remix (streaming SSR, nested routing, revalidation fine des données), l'objectif est de passer les seuils « bons » de Google : INP sous 200 ms, LCP sous 2,5 s, CLS sous 0,1. Nous mesurons avant et après la migration, et PageSpeed Insights doit passer au vert sur les templates principaux.

Framework Remix + GraphQL Storefront API. Remix est une référence pour l'e-commerce riche en données. GraphQL Storefront API permet de ne récupérer que les données utiles par template (collection, produit, panier), avec moins de surcharge réseau qu'une API REST. La DX (developer experience) est excellente pour une équipe frontend habituée à React.

Oxygen hosting inclus dans Shopify. Pas de facture AWS, Vercel ou Cloudflare additionnelle pour héberger le frontend Hydrogen (à confirmer selon votre plan). Déploiement edge inclus. Monitoring intégré dans l'admin Shopify (latence par POP, erreurs, traces).

#Limites honnêtes de Shopify Hydrogen

Vendor lock-in Shopify. Ton frontend Hydrogen est conçu pour le Storefront API Shopify. Migrer ultérieurement vers Medusa ou CommerceLayer demanderait de réécrire toute la couche data fetching. C'est un coût de sortie réel.

Mensualités Shopify Plus pour les grosses volumétries. Shopify Plus est facturé en licence mensuelle et grimpe avec le volume (transaction fees selon les conditions de l'éditeur, à consulter sur son site). À fort chiffre d'affaires, l'écart cumulé avec Medusa self-hosted devient significatif.

Pas d'open source pur. Hydrogen lui-même est open source MIT, mais il est inséparable du Storefront API Shopify (propriétaire). Si ta gouvernance impose un stack 100 % open source ou souverain (loi SREN, marchés publics, hébergeur qualifié SecNumCloud), Hydrogen n'est pas la bonne réponse. Medusa.js l'est.

Moins de flexibilité sur les workflows commande très spécifiques. Si tu veux modifier en profondeur le panier (panier multi-étapes B2B avec devis), la fiscalité (TVA intracommunautaire complexe), ou intégrer un ERP métier non standard, tu vas buter sur les limites du backend Shopify (verrouillé). Là encore, Medusa offre plus de flexibilité.

#Méthode Nehos de migration Liquid → Hydrogen

Quatre phases, dont la durée dépend du périmètre.

Phase 1 — Audit Liquid existant (1 à 2 semaines). Crawl Screaming Frog exhaustif. Mesure Core Web Vitals réels via Chrome User Experience Report (CrUX) sur 28 jours glissants. Analyse du thème Liquid : sections, snippets, customisations, technical debt. Audit des apps Shopify installées (compatibilité Hydrogen documentée). Mapping SEO complet (URLs, schema markup, hreflang, sitemap). Output : rapport chiffré + scope définitif + chiffrage précis.

Phase 2 — Refonte design Figma (2 à 4 semaines). Design system complet : tokens (couleurs, typo, spacing, motion), composants atomiques, templates principaux (home, collection, fiche produit, panier, checkout, compte client, blog). Tests utilisateurs sur 3-5 personas DNVB. Validation accessibilité WCAG 2.2 AA en amont du dev. Output : Figma complet + design tokens exportables.

Phase 3 — Développement Hydrogen (8 à 12 semaines). Setup projet Hydrogen + Remix. Intégration GraphQL Storefront API. Implémentation des templates avec Server Components Remix et streaming. Intégration des apps Shopify critiques (Klaviyo, Yotpo, Loop Returns, Recharge selon scope).

Tests E2E Playwright sur les parcours critiques (panier, checkout, search, compte). Setup tracking GA4 + Shopify Pixels + Meta CAPI. Output : staging Hydrogen complet sur shopify-hydrogen.staging.client.com.

Phase 4 — Migration progressive sans interruption commerciale (1 à 2 semaines). Bascule progressive par section (blog d'abord, puis collections, puis fiches produit, puis home) avec rollback instantané possible. Plan de redirections 301 exhaustif activé en amont. Monitoring intensif 90 jours post-launch (Search Console, Sentry, PageSpeed Insights, dashboards Shopify). Hyper-care quotidien les 30 premiers jours. Aucune interruption de service côté checkout ou paiement.

#Exemple de situation

Ce n'est pas une référence client : c'est une situation type que nous rencontrons.

Une marque DNVB cosmétique premium déjà sur Shopify Liquid, avec un thème Dawn customisé en interne et plusieurs années de dette technique. Symptômes typiques : INP très mauvais sur les fiches produit, LCP lent sur mobile, conversion mobile nettement inférieure à la conversion desktop, dépendance forte aux publicités Meta et Google avec un CAC en hausse.

La migration type : Shopify Hydrogen + Remix + Oxygen, avec Klaviyo (email), Yotpo (avis), Loop Returns (retours) et Recharge (abonnement), design refait en Figma avec design system et tests utilisateurs. On mesure INP, LCP, conversion mobile, trafic SEO et CAC avant et après, sur douze mois, puis on décide de la suite.

#Tarification d'une migration Liquid → Hydrogen

Le budget dépend du nombre de templates, du nombre d'apps à intégrer, du design à refaire et des langues. Nous chiffrons sur devis en 48 h après un premier échange, avec périmètre, planning et budget fixés avant de démarrer.

Diagnostic e-commerce headless de 5 jours pour cadrer le scope, valider l'architecture cible (Hydrogen, Medusa ou sur-mesure) et chiffrer précisément. Pas d'engagement après le diagnostic : vous repartez avec un rapport actionnable même si la migration ne se fait pas.

Facturation par jalons : lancement, mi-projet (validation Figma + premiers templates Hydrogen en staging), go-live validé. MCO post-launch en option. Pour des besoins ponctuels, la régie est à 275 € HT par jour.