Topic

Quand une architecture headless a du sens

Insights/ Architecture web & plateformes / Décisions d'architecture

05 déc. 2023 - 09 min de lecture

Quand une architecture headless a du sens
Écouter l’article00:00 / 11:44

Ce que « headless » veut vraiment dire (et ce que ça ne veut pas dire)

Dans un site piloté par un CMS traditionnel, le même système gère le stockage du contenu, l’édition, le templating de pages et le rendu HTML. WordPress avec un thème est l’exemple canonique. L’éditeur se connecte, écrit un article, et le même système qui a stocké l’article produit le HTML que voit le visiteur.

Une architecture headless casse cela en deux systèmes : une couche de contenu (un CMS ou une API de contenu) qui stocke, valide et sert du contenu structuré, et un frontend séparé (une application Next.js, une application mobile, un écran en magasin) qui va chercher le contenu et le rend de la manière dont il a besoin. Le CMS est « headless » parce qu’il n’a pas de tête, pas de couche de rendu propre.

Ce que le headless n’est pas : une solution magique aux sites lents, une issue au verrouillage fournisseur, ou une garantie de meilleur SEO. Bien fait, il peut soutenir les trois. Mal fait, il peut rendre les trois pires que le CMS monolithique qu’il a remplacé.

La question de décision pour un projet réel est plus étroite que la version marketing : la valeur du découplage entre contenu et présentation justifie-t-elle la maintenance de deux systèmes au lieu d’un. Le contexte pilier de ce choix se trouve dans l’article sur le choix d’architecture ; cet article est le cadre de décision ciblé pour l’option headless en particulier.

Quand le headless paie réellement son coût

Trois formes de projet font systématiquement du headless le bon choix plutôt qu’un choix de mode.

La première, c’est la réutilisation de contenu sur plusieurs canaux. Le même contenu doit s’afficher sur un site web, une application mobile, une intégration partenaire, une borne en magasin, un modèle d’e-mail. Mettre ce contenu dans un CMS qui produit du HTML pour l’un de ces canaux et essayer ensuite de le syndiquer aux autres est douloureux. Le mettre dans une API de contenu et laisser chaque canal le rendre nativement, c’est précisément ce pour quoi le headless a été conçu.

La deuxième, c’est une équipe éditoriale qui a besoin d’un vrai CMS, travaillant avec un frontend qui doit faire quelque chose qu’un thème de CMS ne peut pas. Les éditeurs veulent des modèles de contenu structurés, des brouillons, de la planification, des permissions par rôle, des workflows multilingues. Le frontend doit être une application React ou Vue entièrement custom avec des fonctionnalités interactives, du contenu rendu côté serveur avec personnalisation, du routage complexe. Un CMS monolithique peut bien servir l’un des deux ; le headless laisse les deux tourner sur des outils qui sont bons pour leur travail respectif.

La troisième, c’est un hub de contenu multilingue à grande échelle. Une source de vérité unique pour le contenu, plusieurs locales, avec le même frontend qui rend la version de chaque locale. Fait dans un monolithe, cela devient une longue histoire de plugins de traduction, de surcharges de thème et de gestion de slugs. Fait en headless avec un CMS qui prend la localisation au sérieux, cela devient un champ structuré sur chaque entrée de contenu.

Dans les trois cas, le coût de faire tourner deux systèmes est justifié par ce que le découplage débloque réellement. L’erreur, c’est d’invoquer les mêmes justifications pour des projets qui n’ont aucune de ces formes.

Quand le headless est démesuré

À l’inverse, trois formes de projet font systématiquement du headless le mauvais outil, même quand l’équipe préférerait l’utiliser.

Un site web mono-canal avec un contenu simple et plutôt stable. Pages marketing, un blog, une page contact, peut-être un petit catalogue produits. Le contenu n’alimente aucun autre canal. Les éditeurs sont à l’aise avec WordPress ou un CMS monolithique équivalent. Un frontend custom achète très peu, et l’équipe finit par maintenir un codebase frontend pour rendre du contenu que le CMS aurait pu rendre lui-même avec un thème compétent.

Une équipe éditoriale qui veut du WYSIWYG et un aperçu en direct. Les setups headless peuvent être configurés pour soutenir les aperçus de brouillons, mais cela demande un vrai travail : un environnement de preview, un mode draft dans le frontend, une manière pour les éditeurs de voir exactement comment leurs changements vont s’afficher. Sauter ce travail produit des éditeurs qui écrivent dans un formulaire structuré et ne voient à quoi cela ressemble qu’après publication, ce que la plupart des éditeurs non techniques détestent. La bonne réponse pour cette équipe est souvent un CMS monolithique ou un CMS hybride avec un preview de premier rang, pas du headless sans preview.

Une petite équipe sans capacité d’ingénierie frontend. Le headless implique que quelqu’un possède l’application frontend : déploiement, dépendances, montées de version du framework, performance, accessibilité. Une équipe qui ne peut pas maintenir un frontend custom dans la durée ne devrait pas adopter une architecture qui en exige un. Le bon choix est un CMS monolithique où le mainteneur est l’éditeur du CMS et un thème.

Le motif est le même : le headless sans l’une des trois formes « bon choix » paie pour des capacités que le projet n’utilisera pas, avec une charge opérationnelle que l’équipe finira par regretter dans l’année.

Ce qu’on prend sur soi côté opérationnel

Un dispositif headless, ce sont deux systèmes. Cela paraît évident jusqu’à la semaine du lancement. Cinq réalités opérationnelles décident si l’équipe est contente de son choix dans dix-huit mois.

Deux pipelines de déploiement. Le CMS (ou un CMS managé) sort à son propre rythme ; le frontend sort au sien. Les changements coordonnés (un nouveau type de contenu que le frontend doit savoir rendre) exigent de coordonner deux releases. Concevoir pour cela dès le premier jour, avec des modèles de contenu rétro-compatibles et des changements frontend additifs, évite la plupart de la douleur.

Cache et revalidation. Le frontend met du contenu en cache pour la performance. Quand un éditeur publie un changement, le cache doit être invalidé ou revalidé. Webhooks, revalidation à la demande, ISR, purges de cache au edge : c’est de la vraie ingénierie, pas une case à cocher. Sauter ce travail produit un CMS où les éditeurs publient puis regardent leurs changements ne pas apparaître pendant des heures.

Aperçu et brouillons. Les éditeurs s’attendent à voir ce qu’ils sont sur le point de publier. Le frontend doit soutenir un mode brouillon qui rend du contenu non publié pour des relecteurs authentifiés, avec la même mise en page qu’en production. Ce n’est pas trivial et c’est fréquemment laissé hors périmètre, puis regretté.

Pipeline d’images et d’assets. Le CMS stocke les images ; le frontend les sert. L’optimisation (tailles responsives, formats modernes, livraison via CDN) vit quelque part, et ce quelque part fait partie de la conception d’intégration. Beaucoup d’éditeurs de CMS offrent cela ; utiliser leur pipeline est généralement moins cher que d’en construire un.

Deux surfaces de panne. Le CMS peut être en panne ; le frontend peut être en panne ; la connexion entre eux peut être en panne. Chaque mode de panne doit être géré. Un frontend qui crashe quand le CMS est injoignable est un frontend qui réveille quelqu’un à chaque déploiement du CMS. La génération statique ou un cache stale-while-revalidate côté frontend achète une vraie résilience ici.

Ce ne sont pas des choses exotiques ; c’est le ticket d’entrée. Les équipes qui passent au headless sans budgétiser ces points finissent par reconstruire les cinq mêmes capacités dix-huit mois plus tard.

La question du fournisseur

L’écosystème headless se divise en trois grandes catégories, et chacune porte un engagement de long terme différent.

CMS SaaS managé (Contentful, Sanity, Storyblok, Prismic, Hygraph). Force : faible charge opérationnelle, vraie expérience éditeur, chemin de mise à niveau prévisible. Faiblesse : le verrouillage fournisseur est réel (APIs de contenu propriétaires, outils d’édition propriétaires, portes de sortie qui marchent en théorie et saignent en pratique), et la tarification croît avec l’usage. Bonne adéquation quand les besoins de workflow éditorial sont exigeants et que l’engagement de long terme avec le fournisseur est acceptable.

CMS open-source auto-hébergé (Strapi, Directus, Payload, Keystone). Force : propriété des données, pas de tarification fournisseur par siège, personnalisation. Faiblesse : quelqu’un doit opérer le CMS (hébergement, sauvegardes, mises à jour, correctifs de sécurité), et la finition éditoriale est souvent en retard sur les concurrents SaaS. Bonne adéquation quand l’équipe a une capacité d’opérations et que le modèle de contenu du projet est suffisamment particulier pour bénéficier de types de champs ou de vues admin sur mesure.

WordPress (ou un autre CMS monolithique) utilisé en headless. Le CMS tourne comme avant, les éditeurs travaillent dans l’interface familière, mais le frontend récupère le contenu via l’API REST ou GraphQL au lieu d’utiliser le thème WordPress. Force : l’équipe éditoriale garde un outil qu’elle connaît, l’équipe d’ingénierie obtient un frontend custom. Faiblesse : le CMS n’a pas été conçu d’abord comme une API de contenu, et les cas limites autour des révisions, du multilingue et des champs type ACF peuvent devenir de la dette d’intégration. Bonne adéquation quand il y a un investissement WordPress existant et une vraie raison de garder les éditeurs là.

Le « bon » fournisseur headless dépend de l’équipe éditoriale, de la capacité d’opérations et de l’horizon de temps. Le mauvais choix, c’est de prendre le plus à la mode sans nommer qui va le maintenir dans trois ans.

Conclusion

Le headless est une vraie capacité avec un vrai coût. C’est le bon choix quand le projet a réellement besoin de réutilisation de contenu sur plusieurs canaux, d’un vrai CMS associé à un frontend custom, ou d’un hub multilingue sérieux. C’est le mauvais choix pour les sites mono-canal au contenu stable, pour les équipes éditoriales qui ont besoin de WYSIWYG, et pour les petites équipes sans la capacité frontend pour maintenir le second système. La décision n’est presque jamais sur le caractère « moderne » du headless ; elle porte sur le fait que la valeur que le découplage débloque justifie ou non les deux systèmes qui viennent avec.

Le contexte plus large, dont la manière dont le choix headless se relie aux autres décisions d’architecture et de découpage, est rassemblé dans le cluster architecture web et plateformes. Et lorsque la question passe de « devrions-nous passer en headless » à « nous avons décidé que oui, et il nous faut maintenant quelqu’un pour concevoir le modèle de contenu, le frontend, la stratégie de cache et l’intégration sans avoir à tout reconstruire dans dix-huit mois », c’est exactement ce sur quoi mon accompagnement développement d’applications web est centré.

- Haja Faniry

Services liés

Développement d'applications web

Développement d'applications web sur mesure pour entreprises, startups et organisations internationales.

Plateformes Numériques pour ONG & Organisations

Développement de plateformes numériques et systèmes de données pour ONG, institutions de recherche et organisations internationales.

SEO Technique & Performance Web

Services de SEO technique et optimisation des performances web pour améliorer la visibilité et la rapidité des sites internet.

Article précédent
Comment concevoir une plateforme web scalable
Article suivant
Monolithe vs architecture modulaire pour les projets web modernes
Quand une architecture headless a du sens | Haja Faniry