Headless

Headless, littéralement « sans tête », désigne un logiciel dont on a séparé le corps et la tête. Le corps, c'est le back-end, l'endroit où sont stockés les produits, les contenus, les commandes et les clients, et où s'appliquent les règles métier. La tête, c'est le front-end, le site ou l'application que les gens voient et utilisent. Dans une architecture headless, les deux sont séparés et le front-end récupère tout ce dont il a besoin auprès du back-end via une API.

Le mot revient quand un fondateur discute avec une agence, quand une marque compare des plateformes e-commerce ou quand des développeurs proposent une « stack moderne ». Cette page explique simplement ce que veut dire headless, comment marchent le headless commerce et le CMS headless, ce que cela coûte et comment savoir si votre activité en a besoin.

Qu'est-ce que le headless ?

Sur une plateforme traditionnelle, dite couplée, l'interface d'administration où vous gérez vos produits et le site qui les affiche forment un seul ensemble. Vous choisissez un thème, vous le modifiez et vous publiez. La plateforme gère les deux côtés.

Sur une plateforme headless, le back-end n'a pas de site à lui. Il expose ses données et ses actions par une API, et un développeur construit le front-end à part, souvent avec un framework moderne comme Next.js, Nuxt ou Astro. Le même back-end peut alors alimenter plusieurs « têtes » à la fois, comme un site, une application mobile, une borne en magasin, une application TV ou le site d'un partenaire.

Vous croiserez le mot dans plusieurs expressions.

• Headless commerce : un back-end e-commerce (catalogue, panier, checkout, commandes) utilisé sans sa boutique par défaut. Par exemple commercetools, BigCommerce en mode headless, ou Shopify avec un front-end sur mesure construit sur son API Storefront ou son framework Hydrogen.
• CMS headless : un système de gestion de contenu qui se contente de stocker et de servir les contenus, comme Contentful, Sanity, Strapi ou Payload. Les développeurs décident comment et où les contenus s'affichent. Notre définition du CMS présente le modèle traditionnel.
• Commerce composable : une étape de plus, où l'entreprise assemble plusieurs services headless spécialisés (recherche, CMS, checkout, avis) au lieu d'une seule plateforme.
• Navigateur headless : un autre sens. C'est un navigateur qui fonctionne sans fenêtre visible, utilisé par les développeurs pour les tests automatisés, les captures d'écran ou la collecte de données. Chrome et Firefox ont tous deux un mode headless.
• Serveur headless : un ordinateur qui tourne sans écran, ni clavier, ni souris, administré à distance.

Le headless se distingue de la conception API-first. API-first décrit la façon dont un produit est construit, en commençant par l'API. Headless décrit la façon dont on l'utilise, avec son propre front-end. Les produits API-first facilitent le headless, mais on peut aussi les utiliser avec leur interface standard.

Pourquoi c'est important

Le headless compte parce qu'il change qui construit et entretient votre site, et donc vos coûts et votre rythme.

Prenons une marque de soins qui réalise 40 000 € de chiffre d'affaires par mois. Sur une boutique hébergée classique avec un thème, le site est compris dans l'abonnement, entre 39 € et 300 € par mois, et la fondatrice peut changer une bannière en cinq minutes. Si la même marque passe en headless, un développeur ou une agence construit un front-end sur mesure, souvent entre 20 000 € et 80 000 € pour une première version, plus un hébergement et une maintenance qui peuvent atteindre 1 000 € à 3 000 € par mois. En échange, les pages peuvent se charger plus vite, le design n'a plus les limites d'un thème et le même catalogue peut alimenter une application mobile.

Si cette rapidité et cette liberté font passer le taux de conversion de 2,0 % à 2,3 % sur 100 000 visiteurs mensuels avec un panier moyen de 60 €, le chiffre d'affaires augmente d'environ 18 000 € par mois, et l'investissement est rentabilisé en quelques mois. Si la conversion ne bouge pas, la marque a ajouté un coût fixe important et dépend d'un développeur pour chaque modification.

Ce compromis, plus de contrôle contre plus de coûts et de complexité, est au cœur de toute décision headless.

Comment ça marche

Une architecture headless suit un circuit simple.

• Le back-end stocke tout. Produits, variantes, prix, stock, contenus, clients et commandes vivent dans le moteur e-commerce ou le CMS.
• L'API les expose. Le back-end propose des points d'accès, souvent REST ou GraphQL, comme « lister les produits de cette collection » ou « ajouter cet article au panier ».
• Le front-end demande les données. Quand un visiteur ouvre une page, le site ou l'application appelle l'API et reçoit les informations nécessaires.
• Le front-end affiche la page. Le code du développeur décide de la mise en page, du design et des interactions. Beaucoup de sites headless génèrent les pages à l'avance pour gagner en vitesse.
• Les actions repassent par l'API. Ajouter au panier, se connecter ou payer envoie une requête au back-end, qui applique les règles et enregistre le résultat.
• D'autres têtes réutilisent la même API. Une application mobile, un écran en magasin ou un connecteur marketplace peuvent utiliser le même back-end sans dupliquer les données.

Le checkout est souvent la partie la plus délicate. Beaucoup de boutiques headless conservent le checkout hébergé de la plateforme, car il gère de façon sécurisée les paiements, les taxes et la lutte contre la fraude, et ne personnalisent que les pages qui le précèdent.

Repères et exemples

• Les grandes enseignes et les marques en forte croissance passent en headless pour faire tourner un site, des applications et des magasins sur un même catalogue, pour atteindre une vitesse maximale ou pour proposer des expériences qu'un thème ne permet pas, comme un configurateur de produit.
• Les médias et marques riches en contenu utilisent un CMS headless pour publier les mêmes articles sur un site, une application et des newsletters.
• Les agences recommandent souvent le headless au-delà d'environ 1 million d'euros de chiffre d'affaires en ligne par an, quand un petit gain de conversion couvre le coût.
• Les créateurs et les petites boutiques en ont rarement besoin. Une vitrine hébergée avec un thème ou une page de lien en bio avec checkout couvre la plupart des besoins pour une fraction du prix.
• Les délais de création d'une première boutique headless vont souvent de 2 à 6 mois, contre quelques jours à quelques semaines pour une boutique avec thème.

Erreurs fréquentes

• Passer en headless pour le mot à la mode. Avec un seul site et une petite équipe, vous ajoutez des coûts sans bénéfice clair.
• Oublier les coûts récurrents. La création n'est qu'un début. Chaque nouvelle fonctionnalité, intégration ou modification de design demande désormais un développeur.
• Perdre les fonctionnalités intégrées. Les applications et options du thème cessent souvent de fonctionner sur un front-end sur mesure et doivent être reconstruites.
• Oublier l'équipe marketing. Si les marketeurs ne peuvent plus modifier une page ou lancer une promotion sans développeur, les campagnes ralentissent.
• Sous-estimer le référencement. Redirections, balises, données structurées et vitesse doivent être traitées avec soin pendant la migration.

Bonnes pratiques

• Partez d'une raison business. Écrivez ce que le headless doit apporter, comme une application mobile, des pages plus rapides ou une deuxième marque sur le même catalogue, et comment vous le mesurerez.
• Faites vos calculs. Estimez le coût de création et le coût mensuel, puis calculez le gain de conversion nécessaire pour les rembourser.
• Gardez le checkout hébergé si possible. Cela réduit le travail de sécurité et de conformité et fiabilise les paiements.
• Donnez un outil visuel aux équipes. Associez le front-end à un CMS pour que les non-développeurs puissent mettre à jour les contenus et les landing pages.
• Préparez la migration. Faites correspondre chaque ancienne URL à une nouvelle, testez la vitesse et le suivi, et lancez en période calme.
• Restez propriétaire. Vérifiez que le code du front-end, les comptes d'hébergement et la documentation appartiennent à votre entreprise.

Dans Roctify

Avec Roctify, vous n'avez pas besoin de passer en headless. La plateforme vous donne un front-end prêt à l'emploi, une page de lien en bio et une boutique complète, construites sur un catalogue partagé. Vos produits, variantes, stocks, prix, clients et commandes sont les mêmes sur chaque canal, et le stock se met à jour partout en même temps. Vous obtenez ainsi le principal avantage recherché dans le headless commerce, un seul back-end qui alimente plusieurs canaux, sans payer de front-end sur mesure ni d'équipe de développement.

Roctify ne propose pas d'API publique aujourd'hui. Les entreprises qui ont des besoins d'intégration avancés peuvent en discuter dans le cadre de l'offre Enterprise.

FAQ

Que veut dire headless en termes simples ?

Headless signifie que la partie d'un système qui stocke les données et applique les règles est séparée de la partie que voient les gens. Le site ou l'application visible récupère ses données par une API. Un même back-end peut ainsi alimenter plusieurs interfaces, mais il faut construire chacune d'elles.

Le headless commerce vaut-il le coup pour une petite entreprise ?

En général, non. Une création headless coûte souvent des dizaines de milliers d'euros, plus une maintenance mensuelle, alors qu'une boutique avec thème ou une boutique en lien en bio coûte un petit abonnement. Le headless devient pertinent quand vous avez plusieurs canaux, une équipe technique et assez de chiffre d'affaires pour qu'un petit gain de conversion couvre le coût.

Quelle différence entre un CMS headless et un CMS traditionnel ?

Un CMS traditionnel comprend à la fois l'interface d'édition et le site qui affiche les contenus. Un CMS headless se contente de stocker et de servir les contenus par une API, et les développeurs construisent le site ou l'application qui les affiche. Le headless offre plus de liberté pour réutiliser les contenus sur plusieurs canaux, mais demande plus de travail technique.