Shopify headless (Hydrogen) : pour qui, vraiment

Le headless consiste à conserver Shopify pour le catalogue, le panier et le paiement, et à construire la vitrine avec sa propre technologie, en interrogeant l'API Storefront. Hydrogen est le cadre officiel pour le faire en React, Oxygen l'hébergement associé. Cette architecture se justifie quand la vitrine doit dépasser ce que Liquid permet, quand le contenu éditorial pèse autant que le catalogue, ou quand la boutique n'est qu'un canal parmi plusieurs. Elle ne se justifie pas pour gagner en vitesse.

Ce que le headless change concrètement

Dans une boutique Shopify classique, la vitrine est produite par Shopify à partir de vos gabarits Liquid. Vous personnalisez, Shopify sert.

En headless, la vitrine devient une application que vous écrivez et que vous déployez. Elle interroge l'API Storefront pour les produits, les collections et le panier, et redirige vers le tunnel de commande de Shopify pour le paiement, qui reste hébergé chez eux. Vous récupérez la maîtrise complète du rendu, et vous héritez de tout ce qui va avec.

Ce qui reste chez Shopify : le catalogue, les stocks, les commandes, les clients, le paiement, la fraude, la conformité. Ce qui passe chez vous : le rendu, le routage, le cache, les performances, le référencement technique, la disponibilité de la vitrine, et le déploiement.

Les trois cas qui le justifient

1. La vitrine dépasse ce que Liquid sait faire. Un configurateur qui recalcule un prix en direct, une expérience de navigation qui n'est pas une grille de collections, un parcours qui mêle contenu et produits dans une même page, une application qui doit fonctionner hors connexion. Liquid rend des pages, il ne construit pas des applications.

2. Le contenu pèse autant que le catalogue. Une marque dont le site est à moitié un magazine, avec des guides, des dossiers et des rubriques éditoriales structurées. Le module de contenu de Shopify est rudimentaire. En headless, on branche un vrai système de gestion de contenu à côté du catalogue, et chacun fait son métier.

3. La boutique est un canal parmi d'autres. Une entreprise qui vend aussi sur une place de marché, dans des points de vente physiques, via une application mobile, et qui veut une seule source de vérité produit alimentant plusieurs interfaces. C'est le cas où l'architecture est réellement une architecture, et pas un choix de rendu.

Ce qui n'est pas une raison

La vitesse. C'est la raison la plus souvent invoquée et c'est la plus faible. Une boutique Shopify classique bien construite est rapide. Une boutique lente l'est à cause de ses applications et de ses images, et ces deux causes survivent au passage en headless. Le sujet est traité dans notre article sur la vitesse d'une boutique Shopify.

Il y a même un risque inverse : une application React mal construite est plus lente qu'un thème Liquid, parce qu'elle demande au navigateur de faire un travail que Shopify faisait sur ses serveurs.

Le SEO. Shopify gère correctement les sitemaps, les canoniques et les redirections. En headless, vous refaites tout ça vous-même, et vous pouvez le faire moins bien.

La modernité. Choisir une architecture parce qu'elle est plus récente est le meilleur moyen de payer deux fois. Le critère est ce que vous ne pouvez pas faire autrement, pas ce qui se dit dans les conférences.

Ce que ça coûte réellement

Le développement initial. Comptez au minimum le double d'un thème sur-mesure, parce que tout ce que Shopify offrait par défaut doit être écrit : les gabarits, le panier, la recherche, les filtres, la pagination, la gestion des variantes, les états de rupture.

Les applications de la place de marché. Beaucoup d'applications s'intègrent à la vitrine via des blocs Liquid. En headless, ces intégrations ne fonctionnent plus. Chaque application dont vous avez besoin doit exposer une API et être réintégrée à la main. C'est le point qui surprend le plus, et il faut le vérifier application par application avant de s'engager.

La maintenance. Vous avez maintenant une application à maintenir : dépendances, versions du cadre, évolutions de l'API Storefront. Ce n'est pas énorme, ce n'est pas nul, et personne ne le fera à votre place.

L'équipe. Un thème Liquid se modifie par un intégrateur. Une application Hydrogen demande un développeur React. La différence de disponibilité et de coût est réelle.

Hydrogen et Oxygen, ou autre chose

Hydrogen est le cadre officiel de Shopify, construit sur React Router, avec des composants et des utilitaires prévus pour le commerce. Oxygen est l'hébergement de Shopify pour ces applications, inclus dans les offres qui y donnent droit.

L'alternative est d'utiliser un autre cadre React, Next.js par exemple, en appelant l'API Storefront directement. C'est parfaitement viable, et c'est ce que nous faisons quand la vitrine n'est pas uniquement une boutique : un site d'entreprise avec une section commerce, par exemple. On perd les composants tout faits d'Hydrogen, on gagne la liberté d'architecture et la possibilité d'héberger où l'on veut.

Le critère : si le site est une boutique et rien d'autre, Hydrogen et Oxygen font gagner du temps. Si le commerce est une partie d'un ensemble plus large, un cadre généraliste est plus adapté.

Comment décider

Trois questions, dans cet ordre.

Y a-t-il une chose que vous voulez faire et que Liquid ne permet pas ? Si vous ne pouvez pas la nommer précisément, la réponse est non.

Avez-vous un développeur, interne ou sous contrat, disponible dans dix-huit mois ? Si la réponse est incertaine, restez sur un thème.

Le gain attendu justifie-t-il le double budget ? Sur une boutique dont le chiffre d'affaires ne supporte pas encore un investissement de cette taille, la réponse est claire.

Questions fréquentes

Le paiement reste-t-il chez Shopify en headless ?

Oui. Le tunnel de commande demeure hébergé et géré par Shopify, ce qui préserve la conformité, la gestion de la fraude et les moyens de paiement. C'est d'ailleurs l'un des intérêts du modèle : vous reprenez la vitrine, vous ne reprenez pas la partie la plus risquée.

Peut-on revenir en arrière après un passage en headless ?

Oui, la boutique Shopify existe toujours et son thème peut être réactivé. En pratique, le retour signifie reconstruire la vitrine en Liquid, donc un second chantier. Le vrai coût du headless n'est pas l'irréversibilité, c'est l'accumulation de développement spécifique qu'il faudrait réécrire.

Toutes les applications Shopify fonctionnent-elles en headless ?

Non, et c'est le point de contrôle le plus important avant de s'engager. Les applications qui s'intègrent à la vitrine par des blocs de thème ne fonctionnent plus. Celles qui exposent une API peuvent être réintégrées, à un coût de développement. Faites l'inventaire de vos applications critiques avant la décision, pas après.

Le headless améliore-t-il le référencement ?

Il ne l'améliore pas en soi et il peut le dégrader si le rendu côté serveur, les sitemaps et les canoniques ne sont pas traités avec soin. Bien construit, il permet en revanche une maîtrise fine du balisage et de la structure, ce que Liquid contraint davantage. C'est un potentiel, pas un acquis.

Notre position

Nous construisons ces architectures quand l'une des trois situations décrites plus haut est réunie, et nous le déconseillons dans tous les autres cas. Un thème sur-mesure bien conçu couvre plus de besoins qu'on ne le croit, et il coûte la moitié. Le choix entre les deux est traité dans notre article sur le thème sur-mesure ou premium, et nous accompagnons les deux voies, c'est l'objet de notre page refonte de site Shopify.