Que veut dire headless ?
Headless veut dire « sans tête » en anglais. Dans un logiciel web, la tête est la couche de présentation : les pages, les gabarits, ce que voit le visiteur. Le corps est le back-office où l'on saisit les produits, les textes, les prix et les stocks. Un CMS ou une plateforme e-commerce classique livre les deux ensemble : le même logiciel stocke le contenu et fabrique les pages. Une architecture headless coupe ce lien : le back-office expose ses données par une API, et une ou plusieurs applications indépendantes se chargent de l'affichage.
La comparaison la plus simple est celle d'une rédaction de journal. Les journalistes écrivent un article une seule fois ; l'édition papier, le site, l'application et la lettre d'information le mettent ensuite en forme chacun à sa façon. Dans un système classique, la rédaction et l'imprimerie seraient une seule et même machine, incapable de servir un autre support.
Comment fonctionne une architecture headless ?
- Les équipes saisissent produits et contenus dans le back-office : un CMS headless, une plateforme e-commerce ou un back-office sur mesure.
- Le back-office expose ces données par une API, en général au format JSON.
- Le site, développé par exemple avec Next.js, interroge l'API et construit ses pages ; l'application mobile fait de même avec sa propre interface.
- Les commandes, inscriptions ou demandes repartent vers le back-office par la même API.
La documentation de WordPress décrit bien ce fonctionnement : son API REST permet à des applications d'échanger avec un site WordPress en envoyant et en recevant des données JSON, et donc de construire une interface entièrement nouvelle ou d'amener les contenus du site dans des applications complètement séparées.
Exemples de projets headless
- Boutique en ligne : Shopify présente Hydrogen et Oxygen comme sa pile recommandée pour construire des boutiques headless, et indique que ses API peuvent aussi s'intégrer à n'importe quel framework.
- Site éditorial : un CMS headless comme Strapi, qui se présente comme un CMS headless open source, stocke articles et pages ; le site les affiche à sa manière.
- Réseau de points de vente : le même catalogue alimente le site, l'application de fidélité et les bornes en magasin, avec des prix identiques partout.
- Application et site à parité : pour la marketplace Cospo Line, YMHB Web a livré une application mobile et un site web qui font la même chose sur une base commune, la parité ayant été vérifiée route par route.
Headless ou CMS classique : que choisir ?
| Critère | CMS ou plateforme classique | Headless |
|---|---|---|
| Mise en ligne | Rapide, à partir d'un thème | Plus longue : l'affichage est développé |
| Supports servis | Le site | Site, application, borne, partenaires |
| Liberté de design et de performance | Bornée par le thème et les extensions | Entière, l'affichage étant du code sur mesure |
| Aperçu avant publication | Fourni d'origine | À prévoir dans le développement |
| Évolution de la mise en page | Souvent faisable sans développeur | Passe par un développeur |
| Logiciels à maintenir | Un | Deux : back-office et affichage |
Quand le headless n'est-il pas la bonne réponse ?
Le headless n'est pas la bonne réponse quand un seul support est servi et que le contenu change peu. Un site vitrine d'une vingtaine de pages, mis à jour par une personne non technicienne, gagne rarement à être scindé en deux logiciels : chaque retouche de mise en page passerait par un développeur. Les signaux qui justifient le headless sont plus précis : plusieurs supports à alimenter avec les mêmes données, des exigences de rapidité ou de design que le thème ne tient plus, ou un catalogue piloté par un ERP qui doit rester la seule source de vérité.
Autre idée reçue : un site headless serait mieux référencé par nature. Le référencement dépend de ce que le site envoie aux robots ; avec un affichage séparé, il faut s'assurer que les pages sont produites côté serveur, ce que permettent des frameworks comme Next.js. Le comparatif WordPress, Shopify, Webflow ou Next.js aide à situer les options.
Termes voisins
- Microservices : le headless sépare l'affichage du back-office ; les microservices découpent en plus le back-office lui-même en services indépendants.
- PWA : une application web installable, l'une des formes que peut prendre l'affichage d'une architecture headless.
- CMS headless : un logiciel de gestion de contenu conçu sans affichage, qui ne livre ses contenus que par API.
- Front-end et back-end : les deux moitiés de toute application web, que le headless rend indépendantes l'une de l'autre.
Questions fréquentes
- Qu'est-ce qu'un CMS headless ?
- Un CMS headless est un logiciel de gestion de contenu qui stocke textes, images et pages sans s'occuper de leur affichage : il les met à disposition par une API, et un site ou une application les présente à sa façon. Strapi se présente par exemple comme un CMS headless open source. WordPress peut aussi être utilisé de cette manière grâce à son API REST, qui envoie les contenus au format JSON.
- Quels sont les avantages d'une architecture headless ?
- Une architecture headless permet d'alimenter plusieurs supports (site, application mobile, borne, partenaires) depuis un seul back-office, avec des données identiques partout. Elle laisse une liberté totale sur le design et les performances de l'affichage, développé sur mesure. En contrepartie, elle impose de développer et de maintenir deux logiciels au lieu d'un, et chaque évolution de mise en page passe par un développeur.
- Le headless est-il adapté à un petit site vitrine ?
- Le headless est rarement adapté à un petit site vitrine qui change peu et ne sert qu'un support. Un CMS classique ou un site sur mesure simple coûte moins à faire évoluer, et une personne non technicienne peut souvent y modifier les contenus seule. Le headless se justifie quand les mêmes données doivent alimenter plusieurs supports, ou quand le thème d'un CMS ne permet plus d'atteindre le design ou la rapidité voulus.
- Qu'est-ce que le commerce headless ?
- Le commerce headless est une boutique en ligne dont le moteur (catalogue, panier, paiement, commandes) est séparé de la vitrine affichée au client. La vitrine, développée sur mesure, interroge le moteur par API. Shopify présente ainsi Hydrogen et Oxygen comme sa pile recommandée pour le commerce headless, et permet aussi d'utiliser ses API avec d'autres frameworks et hébergements.