Aujourd’hui, dans le domaine du développement web, le découplage des systèmes frontend et backend a pris de l’ampleur, donnant naissance aux sites web headless.
Traditionnellement, les systèmes de gestion de contenu (CMS) ont toujours été couplés, mais cela s’accompagnait de nombreuses limitations, telles qu’une souplesse et une évolutivité restreintes. Cependant, les CMS headless modernes permettent aux développeurs de découpler le frontend, construit avec n’importe quel framework, du backend via un CMS headless.
Qu’est-ce qu’un CMS headless ?
Un CMS Headless est un système de gestion de contenu spécialisé qui gère exclusivement le backend de votre site. Contrairement aux CMS traditionnels, il ne dicte pas la manière dont le contenu apparaît sur le frontend. Au contraire, il fournit une interface de programmation d’applications (API) permettant aux développeurs de récupérer et de diffuser le contenu sur n’importe quel appareil ou plateforme.
Il existe aujourd’hui de nombreuses plateformes de CMS headless. Cependant, il peut sembler inutile de transférer votre contenu de WordPress, que vous connaissez déjà. Heureusement, il existe une alternative : WordPress headless.
WordPress headless
WordPress, dans sa forme traditionnelle, n’est pas intrinsèquement un CMS headless tête. WordPress est un CMS populaire et puissant, connu pour sa facilité d’utilisation et sa flexibilité en matière de création et de gestion de contenu. Cependant, il combine traditionnellement la gestion du contenu et la manière dont il est présenté dans un seul système.
De nos jours, les développeurs ont créé des implémentations headles de WordPress en utilisant son API REST. Dans ce cas, WordPress fonctionne toujours comme le CMS dans lequel vous créez, gérez et stockez du contenu. Cependant, au lieu de rendre le frontend ou le site web directement par le biais de modèles et de thèmes WordPress, la présentation du frontend est découplée ou détachée du backend.
Cela permet aux développeurs de créer des applications utilisant des technologies et des frameworks différents tout en continuant à tirer parti des fonctionnalités familières de gestion de contenu de WordPress. C’est une façon de faire fonctionner WordPress headless, même si ce n’est pas la configuration par défaut.
Cet article explore deux approches pour récupérer des données de votre CMS WordPress headless dans votre framework frontend, en se concentrant sur deux méthodes principales : WPGraphQL et REST API.
Comprendre l’API REST pour WordPress headless
L’API REST est un pilier fondamental du développement de WordPress qui facilite la récupération de données au format JSON. Depuis WordPress 4.7, elle est intégrée à WordPress et ne nécessite aucune extension pour fonctionner.
Elle fournit un accès aux données du contenu de votre site et met en œuvre les mêmes restrictions d’authentification – le contenu public de votre site est généralement accessible au public via l’API REST, tandis que le contenu privé, le contenu protégé par mot de passe, les utilisateurs internes, les types de publication personnalisés et les métadonnées ne sont disponibles qu’avec une authentification ou si vous l’avez spécifiquement défini comme tel.
Pour obtenir vos données WordPress au format JSON, ajoutez /wp-json à l’URL de votre site WordPress :
http://yoursite.com/wp-jsonSi l’API JSON n’est pas activée par défaut lorsque vous visitez http://yoursite.com/wp-json, vous pouvez l’activer en ouvrant vos Permaliens sous Réglages WordPress et en sélectionnant Nom de publication ou tout autre nom de votre choix sauf Simple :
Cela fonctionne pour les sites WordPress locaux et publics, offrant des points de terminaison pour les articles, les pages, les commentaires, les médias, etc.
http://yoursite.com/wp-json/wp/v2/posts
http://yoursite.com/wp-json/wp/v2/comments
http://yoursite.com/wp-json/wp/v2/mediaIl y a plus que ce que vous pouvez faire avec l’API REST. Lisez notre guide complet pour en savoir plus.
Explorer WPGraphQL pour WordPress headless
En 2012, Facebook a introduit GraphQL, une approche révolutionnaire de la récupération de données via les API. Sa nature déclarative et la récupération sélective des données ont fourni une alternative robuste aux API REST traditionnelles.
En 2015, Jason Bahl a reconnu la demande pour une solution qui combine la flexibilité de GraphQL avec les capacités de contenu de WordPress et a ensuite publié WPGraphQL, un changement de jeu pour les développeurs WordPress.
WPGraphQL est une extension basée sur GraphQL qui offre une approche plus efficace et personnalisée de l’interrogation des données. Il présente un point de terminaison unique, permettant une récupération précise des données et réduisant les problèmes de sur-récupération qui prévalent dans l’API REST.
Comment utiliser WPGraphQL
Pour utiliser WPGraphQL, suivez les étapes suivantes :
- Installez l’extension WPGraphQL : Commencez par installer l’extension WPGraphQL sur votre site WordPress. Vous pouvez le faire à partir du tableau de bord de WordPress ou en la téléchargeant depuis le dépôt officiel des extensions WordPress.
L’extension WpGraphQL sur la place de marché de WP. - Explorez le terrain de jeu GraphQL : Une fois installé, WPGraphQL fournit un terrain de jeu GraphQL intégré. Pour y accéder, naviguez vers l’onglet GraphQL sur votre tableau de bord WordPress :
Explorer l’IDE GraphQL dans WordPress. Le terrain de jeu vous permet d’explorer le schéma, d’exécuter des requêtes et de tester des mutations de manière interactive.
- Créez vos requêtes : Utilisez la puissance de GraphQL en créant des requêtes adaptées à vos besoins spécifiques en matière de données. Exploitez le schéma auto-documenté pour comprendre les données et les relations disponibles.
Récupérez les données des articles WordPress avec WPGraphQL.
Vous pouvez maintenant intégrer WPGraphQL dans votre application frontend, qu’elle soit construite avec React, Vue ou tout autre framework, en utilisant un seul point de terminaison GraphQL pour récupérer les données efficacement et mettre à jour votre interface utilisateur dynamiquement.
Fonctionnalités clés de WPGraphQL
WPGraphQL possède des fonctionnalités clés pour une expérience de récupération de données rationalisée et ciblée, comme indiqué ci-dessous.
Un seul point de terminaison pour une récupération précise des données
WPGraphQL fournit un point de terminaison unifié, typiquement /graphql, qui vous permet de récupérer des données spécifiques de manière efficace. Cela contraste avec l’API REST, où vous avez besoin de plusieurs points de terminaison pour collecter les mêmes informations.
Dans le cas de l’API REST, supposons que vous souhaitiez obtenir des détails sur un article spécifique et ses commentaires. Vous devez faire plusieurs demandes à différents points de terminaison, par exemple :
Pour obtenir des informations sur un article :
http://yoursite.com/wp-json/wp/v2/posts/123Pour obtenir les commentaires liés à l’article :
http://yoursite.com/wp-json/wp/v2/comments?post=123En revanche, avec WPGraphQL, vous pouvez obtenir le même résultat avec une seule requête ciblée :
{
post(id: "123") {
title
content
comments {
edges {
node {
content
}
}
}
}
}Dans cet exemple, la requête GraphQL est envoyée à un seul point de terminaison. La requête spécifie que nous voulons des informations sur l’article portant l’ID « 123 », y compris son titre, son contenu et les commentaires associés. WPGraphQL traite cette requête et renvoie une réponse contenant précisément les données demandées, en une seule fois.
Des requêtes ciblées pour une récupération efficace
Avec GraphQL, vous pouvez élaborer des requêtes spécifiques adaptées à vos besoins. Cela vous permet de ne demander que les données nécessaires et de minimiser les recherches excessives.
Supposons que vous souhaitiez récupérer quelques détails (titre, auteur et date) sur tous les articles. L’API REST ne peut pas le faire. Pour récupérer ces détails, vous devez utiliser un point de terminaison comme celui-ci :
http://yoursite.com/wp-json/wp/v2/postsCe point de terminaison récupère l’ensemble des données de tous les articles, y compris le contenu, les catégories et les données associées. Avec WPGraphQL, vous pouvez élaborer une requête ciblée pour récupérer uniquement les données spécifiques dont vous avez besoin :
{
posts {
title
date
author {
name
}
}
}Dans cet exemple, la requête GraphQL est conçue pour récupérer des détails sur les articles. Cependant, nous ne demandons que le titre, la date et le nom de l’auteur. WPGraphQL vous permet de ne demander que les champs qui vous intéressent, ce qui se traduit par une réponse plus efficace et plus légère.
Ressources racines multiples
WPGraphQL vous permet d’interroger plusieurs ressources racines en une seule requête, ce qui le rend flexible et efficace :
{
posts {
edges {
node {
title
content
}
}
}
pages {
edges {
node {
title
content
}
}
}
}Choisir la tête idéale pour WordPress headless
Lorsque vous vous embarquez dans le voyage d’une installation WordPress headless, l’une des décisions critiques auxquelles vous faites face est de choisir la tête idéale – la technologie frontend qui alimentera votre interface utilisateur et dictera l’expérience de l’utilisateur.
Cette décision est d’une importance capitale car elle a un impact direct sur les performances, l’évolutivité et la maintenabilité de votre application web. Plusieurs frameworks et technologies frontales sont compatibles avec WordPress headless, chacun avec ses points forts et ses considérations.
Par exemple, vous pouvez choisir un générateur de site statique (SSG) et le déployer gratuitement sur l ‘hébergement de site statique de Kinsta, de sorte que vous n’avez qu’à vous soucier de l’hébergement de WordPress (le backend) et à profiter de l’hébergement gratuit de l’interface publique (le frontend).
De même, vous pouvez également utiliser une approche plus robuste, par exemple en utilisant une bibliothèque JavaScript comme React pour alimenter votre frontend et conserver le traitement de WordPress pour le backend.
Résumé
WPGraphQL et l’API REST offrent tous deux des moyens puissants pour récupérer des données à partir d’un CMS WordPress headless et les intégrer de manière transparente dans des applications frontend. Le choix entre les deux dépend des besoins spécifiques de votre projet et de votre approche préférée de récupération des données.
Si vous optez pour l’API REST, vous aurez accès à une solution intégrée dans WordPress, qui vous permettra de récupérer facilement des données au format JSON. D’un autre côté, WPGraphQL fournit une approche plus moderne et plus efficace, en tirant parti de la puissance de GraphQL.
Comme la tendance headless continue d’évoluer, les développeurs peuvent choisir l’outil qui correspond le mieux à leur flux de travail et aux objectifs de leur projet, en assurant une intégration transparente et efficace entre WordPress et le framework frontend de leur choix.
Chez Kinsta, créer et gérer votre WordPress (backend) est un jeu d’enfant grâce à notre hébergement WordPress spécialisé. Il dispose de fonctionnalités intéressantes, notamment la mise en cache, les sauvegardes de site, les certificats SSL Cloudflare gratuits, le CDN de Kinsta, et bien plus encore.
Vous pouvez également déployer votre frontend en utilisant notre hébergement d’applications ou notre hébergement de sites statiques pour les SSG. Cette approche unifiée permet à votre frontend et à votre backend d’être facilement hébergés et accessibles à partir d’un seul tableau de bord.
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
Laisser un commentaire