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 vrai filtre de décision, basé sur 6 migrations livrées par Nehos en 2024-2025.

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 finance team a déjà calibré les coûts commerciaux Shopify (2 à 2,9 % selon plan). Deuxièmement, ton ARR est compris entre 2 et 49,6 M€ — en dessous, Liquid suffit ; au-dessus, 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 plus de 35 000 SKU, 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 2-49,6 M€ : pourquoi Hydrogen gagne 9 fois sur 10

Sur ce segment précis, Hydrogen domine 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, les Core Web Vitals sortent du top 1 % marché out-of-the-box avec Hydrogen Remix + Oxygen edge runtime. C'est ce qui débloque les +30 % de conversion mobile sur lesquels 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 en 1 clic). 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 top 1 % marché. Hydrogen tourne sur Oxygen, le runtime edge Shopify déployé sur 200+ POPs Cloudflare. Combiné avec Remix (streaming SSR + nested routing + data revalidation fine), tu obtiens un INP <100 ms typique post-migration, un LCP <1,5 s, un CLS <0,05. Concrètement, sur la DNVB cosmétique : INP 380 → 95 ms, LCP 3,8 → 1,2 s. Google PageSpeed Insights passe au vert sur 100 % des templates.

Framework Remix + GraphQL Storefront API. Remix est devenu une référence en 2024-2025 (mieux qu'un Next.js Pages Router pour l'e-commerce data-heavy). GraphQL Storefront API permet de fetcher uniquement les données utiles par template (collection, produit, panier) avec un overhead réseau divisé par 5 vs REST. La DX (developer experience) est excellente pour une équipe frontend habituée à React.

Oxygen hosting inclus dans Shopify Plus. Pas de facture AWS, Vercel ou Cloudflare additionnelle pour les clients Shopify Plus. Déploiement edge mondial 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 (15-25 % du codebase typiquement). C'est un coût de sortie réel.

Mensualités Shopify Plus pour les grosses volumétries. Shopify Plus démarre à 2 300 $ / mois et grimpe rapidement avec le volume (transaction fees 0,15 % au-dessus de certains seuils). À partir de 30-49,6 M€ de CA, l'écart cumulé avec Medusa self-hosted devient significatif (parfois 121 k€/an).

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, infra OVHcloud Qualified Cloud), 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

Une méthode éprouvée sur 6 projets DNVB livrés en 2024-2025. Quatre phases, 12 à 20 semaines au total.

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.

#Cas client DNVB cosmétique — résultats mesurés sur 12 mois

Marque française DNVB cosmétique premium à partir de 3,2 k€ ARR à l'arrivée Nehos, déjà sur Shopify Liquid (thème Dawn customisé en interne, 3 années d'accumulation de technical debt). Pain points identifiés au diagnostic : INP catastrophique sur fiche produit (380 ms médian, top 25 % des sites les plus lents), LCP 3,8 s sur mobile, conversion mobile bloquée à 1,1 % vs 2,4 % desktop, dépendance forte aux paid ads Meta + Google (CAC en hausse de 38 % sur 18 mois).

Migration livrée en 16 semaines. Stack : Shopify Hydrogen + Remix + Oxygen + Klaviyo (email) + Yotpo (avis) + Loop Returns (retours) + Recharge (abonnement). Design refait de zéro en Figma. Design system complet livré avec tokens. Tests utilisateurs sur 4 personas DNVB cosmétique.

Résultats mesurés à 12 mois post-launch. INP : 380 → 95 ms (top 1 % marché beauté). LCP : 3,8 → 1,2 s. Conversion mobile : 1,1 → 1,47 %, soit +34 %. CA mobile : +52 % en valeur absolue. Trafic SEO préservé à 97 % dès la première semaine grâce au plan de redirections 301. CAC paid mobile : -19 % grâce à la meilleure conversion mobile (même budget media, plus de ventes). ROI investissement migration : atteint à 11 mois. Budget total : 1211 k€ HT.

#Tarification Nehos pour une migration Liquid → Hydrogen

Fourchette Nehos : 211 k€ HT pour une migration Liquid → Hydrogen complète sur 12 à 20 semaines. Décomposition typique d'un projet 8,5 k€ : diagnostic + audit (211 k€), refonte design Figma (112 k€), développement Hydrogen (711 k€), intégration apps + tracking (à partir de 13 k€), migration + hyper-care 90 jours (à partir de 128 k€).

Diagnostic e-commerce headless1 12 416 € HT fixe sur 5 jours pour cadrer le scope, valider l'architecture cible (Hydrogen vs Medusa vs custom) et chiffrer précisément. Pas d'engagement après le diagnostic — tu repars avec un rapport actionnable même si on ne fait pas la migration ensuite.

Facturation 30 % au lancement, 40 % à mi-projet (validation Figma + premiers templates Hydrogen en staging), 30 % au go-live validé. MCO post-launch en option : à partir de 1 746 € / mois selon scope.