Vercel et Shopify refondent Hydrogen en framework open source et agnostique du runtime

Lors de la conférence Vercel Ship 26 à New York, Vercel et Shopify ont annoncé la refonte complète de Hydrogen, leur framework de commerce headless. Il devient open source et agnostique du runtime : il pourra tourner dans n'importe quel environnement capable d'exécuter du JavaScript, et non plus seulement avec une stack précise.

Ce qui change dans la nouvelle architecture

Hydrogen facilitait déjà le lancement de vitrines headless, mais se portait mal d'une stack à l'autre. La nouvelle version est ouverte et ne dépend d'aucun runtime : les développeurs pourront bâtir leur boutique avec Svelte, Nuxt, Next.js ou leur propre framework.

• L'annonce a eu lieu à la conférence Vercel Ship 26 à New York
• La nouvelle version de Hydrogen est open source et runtime-agnostic
• Svelte, Nuxt, Next.js et les frameworks personnalisés sont pris en charge
• L'architecture se divise en trois couches : core, client et server

Comment fonctionne la couche core

Jusqu'ici, chaque équipe écrivait son propre code « glue » pour dialoguer avec l'API Shopify, par exemple pour formater un prix : l'API ne renvoie pas un nombre, mais un type maison, MoneyV2, où le montant est encodé sous forme de chaîne. Cette logique migre désormais dans une couche core commune, bâtie sur le standard Intl.NumberFormat. Le développeur appelle la fonction formatMoney et obtient un prix formaté, sans écrire ni maintenir sa propre surcouche. Quand l'API Shopify évolue, la mise à jour devient triviale au lieu d'imposer une correction manuelle dans chaque projet.

Ce que fait la couche client

La couche client prend en charge les choix de rendu récurrents, à commencer par l'état du panier. Auparavant, quiconque développait une application e-commerce codait sa propre version du provider de panier : méthodes d'ajout, de mise à jour et de suppression d'articles, application des remises, gestion des devises, états d'erreur, synchronisation entre onglets du navigateur. Dans la nouvelle version de Hydrogen, l'état du panier se branche avec un simple import du hook useCart, au lieu d'être réécrit dans chaque projet.

Ce que cela signifie

Vercel et Shopify regroupent la logique répétitive des boutiques en ligne, comme le formatage des prix ou l'état du panier, dans une couche commune et ouverte. Corrigée et améliorée une seule fois pour tout le monde, elle évite à chaque équipe de résoudre les mêmes problèmes sur sa propre stack.

Questions fréquentes

Avec quels frameworks peut-on utiliser le nouveau Hydrogen ?

Le framework est runtime-agnostic et prend explicitement en charge Svelte, Nuxt et Next.js. Il permet aussi de brancher le framework maison d'un développeur.

De quelles couches se compose la nouvelle architecture de

Hydrogen ?

Les développeurs distinguent trois couches : core (logique commune d'accès à l'API Shopify), client (état de l'UI et du panier) et server.