Qu'est-ce qu'un headless CMS ?

Suite à un article précédent intitulé "Faut-il bannir les CMS comme Wordpress en tant que développeur web ?", j'ai reçu beaucoup de commentaires de développeurs (et développeuses) ayant une idée préconçue des CMS, comme étant des outils "à éviter".

Mais ce que j'ai surtout remarqué, c'était que le concept de headless CMS n'était que très peu évoqué dans les débats, ce qui me fait donc dire qu'il n'est encore qu'assez peu démocratisé.

Aujourd'hui nous allons donc voir ce qu'est un CMS "headless"et en découvrir quelques exemples !

Un back-office, et c'est tout !

Si vous êtes familier avec les CMS classiques, vous savez que toutes les plateformes consistent en deux parties distinctes : le back-office et le front-office. Le premier sert à configurer la plateforme ainsi qu'à ajouter, modifier ou supprimer les données, tandis que le deuxième affiche au visiteur la version "mise en page" de ces données.

On parle aussi vulgairement de partie administrateur et de partie utilisateur.

Au contraire, un CMS "sans-tête" nous offrira un back-office et... c'est tout ! Toute la partie front-office devra être développée à la main et avec n'importe quelle technologie, à condition qu'elle puisse communiquer avec le CMS !

Quel intérêt ?

Ce qui est souvent reproché aux CMS, c'est leur lourdeur, soit en terme de temps de chargement, de propreté du code ou d'expérience utilisateur en général.

En revanche, on privilégie leur utilisation pour leur rapidité de mise en production, leur flexibilité en terme de personnalisation et la possibilité de donner la main à quelqu'un de non-technique, souvent un client.

L'intérêt du headless CMS c'est qu'il réconcilie tout cela en offrant une expérience à la fois flexible et compréhensible côté back-office et un front-office complètement personnalisé que l'on va pouvoir optimiser au maximum !

Un avantage supplémentaire est de pouvoir garder une cohérence et une harmonie dans les compétences front en choisissant le même framework partout, sachant qu'il est assez rare de trouver des CMS classiques à la fois puissant et basés sur des technos front-end récentes !

La communication avec entre les deux se fera par une API (et parfois son SDK) fournie par le CMS et intégrable facilement dans son front-end, ou son framework SSR par exemple.

Quelques exemples de headless CMS

Wordpress

Je sais ce que vous pensez, que Wordpress n'est pas un headless CMS, et pourtant c'est aussi le cas ! Si vous ne voulez pas utiliser tout le système de thème de Wordpress et fabriquer votre partie front-end de A à Z, ce dernier fourni une API Rest native.

Voici un tutoriel simple pour apprendre à l'utiliser : https://wpengine.com/resources/using-wordpress-rest-api-plugin/

Strapi

C'est pour moi l'outil idéal pour déployer un back-office ultra flexible et intuitif en un rien de temps.

La documentation est bien faite et pourra vous guider simplement même lors de l'ajout de logique métier dans l'outil si besoin.

Ghost

J'en ai déjà parlé mais le blog que vous êtes en train de lire est créé avec Ghost, à la différence que j'utilise aussi la partie front-office avec le thème Casper.

Mais si vous souhaitez créer un blog très personnalisé tout en gardant un éditeur super-agréable, je ne peux que vous conseiller la version headless de Ghost !

Contentful

C'est la seule alternative non open-source de ces exemples, mais c'est aussi la seule (de cette liste) à proposer une API GraphQL au lieu d'une API Rest.

Je n'ai pas eu l'occasion de l'utiliser étant donné que je privilégie les solutions auto-hébergeables mais comme je la vois souvent citée je ne voulais pas vous cacher son existence.