Le WordPress headless signifie que vous utilisez WordPress uniquement comme système de gestion de contenu, tandis qu’un frontend distinct comme Next.js ou Astro affiche le site aux visiteurs. Les deux communiquent via la REST API ou GraphQL de WordPress. Cela offre souvent des temps de chargement plus rapides, plus de sécurité et plus de liberté de design, mais demande un peu plus de connaissances techniques qu’un site WordPress classique. Dans cet article, découvrez ce qu’est exactement le WordPress headless et comment le mettre en place vous-même.
Qu’est-ce que le WordPress headless exactement
Dans un site WordPress traditionnel, WordPress génère lui-même le HTML affiché aux visiteurs, via des thèmes et des templates. Avec le WordPress headless, vous découplez ce processus : WordPress reste responsable du stockage et de la gestion du contenu (pages, articles, médias, champs personnalisés), mais l’affichage est pris en charge par une application frontend distincte. Ce frontend récupère le contenu via une API et construit lui-même les pages.
Le résultat est deux systèmes séparés : un backend (WordPress, souvent accessible via son propre sous-domaine) pour la gestion de contenu, et un frontend (construit avec un framework comme Next.js ou Astro) visible par les visiteurs. Les rédacteurs continuent de travailler dans l’environnement WordPress familier ; les développeurs construisent le site séparément avec des technologies web modernes.
Pourquoi choisir le headless
Le WordPress headless n’est pas le meilleur choix pour chaque site, mais dans certaines situations, il offre des avantages clairs.
- Vitesse : le frontend génère des pages statiques ou très légères, sans traitement PHP lourd à chaque visite. Cela se traduit par des temps de chargement plus courts et de meilleurs scores dans les tests de vitesse.
- Sécurité : comme le backend WordPress n’est pas directement visible pour les visiteurs, la surface d’attaque est plus réduite. Il n’y a pas de thème public pouvant être vulnérable.
- Liberté de design : vous n’êtes pas lié aux thèmes WordPress et pouvez créer n’importe quelle interaction ou animation avec des technologies frontend modernes.
- Évolutivité : le frontend peut être mis à l’échelle indépendamment du backend, par exemple via un CDN, ce qui est utile en cas de trafic élevé.
Le revers de la médaille est que vous devez maintenir deux systèmes au lieu d’un, et que des fonctionnalités qui fonctionnent par défaut dans les thèmes WordPress classiques (comme certains plugins de formulaires ou de recherche) doivent être reconstruites manuellement dans le frontend.
Next.js ou Astro : lequel vous convient
Les deux frameworks peuvent parfaitement afficher du contenu WordPress headless, mais leur approche diffère.
Next.js est un framework React qui convient bien aux sites avec beaucoup d’interactivité, comme les boutiques en ligne, les tableaux de bord ou les sites avec fonction de connexion. Il prend en charge à la fois la génération statique et le rendu côté serveur, ce qui vous permet de choisir par page comment le contenu est construit.
Astro est axé sur les sites orientés contenu comme les sites d’entreprise, les blogs et les portfolios. Il envoie par défaut le moins de JavaScript possible au navigateur, ce qui se traduit souvent par des temps de chargement encore plus rapides que Next.js pour ce type de site. Vous pouvez ajouter des éléments interactifs avec des « islands », sans alourdir le reste de la page.
Règle générale : choisissez Astro si votre site est principalement composé de contenu avec peu d’interaction, choisissez Next.js si vous avez besoin de beaucoup de fonctionnalités dynamiques.
Mettre en place WordPress headless
Voici un plan d’action pratique pour mettre en place WordPress headless avec Next.js ou Astro.
Mettez en place un backend WordPress distinct
Installez WordPress sur un sous-domaine, par exemple cms.votredomaine.fr, et utilisez-le uniquement pour la gestion de contenu. Avec Plesk, vous pouvez facilement créer et gérer ce sous-domaine à côté de votre domaine principal.
Activez l’API
La REST API de WordPress est active par défaut. Si vous souhaitez utiliser GraphQL (souvent plus agréable pour des requêtes complexes), installez un plugin qui ajoute le support GraphQL à WordPress.
Mettez en place un projet Next.js ou Astro
Créez un nouveau projet frontend et construisez des pages qui récupèrent le contenu depuis l’API WordPress. Mettez en place des templates pour les types de pages tels que les articles, les pages et les éventuels types de contenu personnalisés.
Mettez en place les aperçus et les déclencheurs de reconstruction
Assurez-vous que les rédacteurs puissent voir un aperçu de leur brouillon, et configurez un webhook qui déclenche automatiquement la reconstruction du frontend dès qu’un contenu est publié ou modifié.
Hébergez correctement les deux composants
Placez le backend WordPress sur un hébergement rapide avec stockage NVMe et gestion Plesk, et hébergez le frontend sur un environnement adapté aux applications Node.js ou aux fichiers statiques. Prévoyez un SSL gratuit et des sauvegardes quotidiennes pour les deux composants, afin que le contenu et le code restent toujours en sécurité.
Testez et configurez le DNS
Vérifiez que les formulaires, la fonction de recherche et les images fonctionnent correctement sur le nouveau frontend. Attribuez ensuite le domaine principal au frontend et le sous-domaine au backend WordPress, et vérifiez vos noms de domaine et paramètres DNS.
Si vous rencontrez des questions de configuration concernant les sous-domaines, le SSL ou les paramètres serveur, vous trouverez des explications pas à pas dans la base de connaissances. Si vous envisagez de changer d’hébergeur pour ce projet, il est judicieux de vérifier au préalable comment se déroule le passage chez Tandata, afin que votre backend soit migré sans interruption.
Questions fréquentes
Le WordPress headless convient-il à tous les sites web ?
Non. Pour les sites d’entreprise simples ou les blogs, un WordPress classique est souvent plus rapide à mettre en place et à entretenir. Le WordPress headless est surtout rentable pour les sites avec des exigences de vitesse élevées, beaucoup de trafic ou des fonctionnalités personnalisées complexes.
Les plugins WordPress fonctionnent-ils encore dans une configuration headless ?
Les plugins qui gèrent du contenu ou des données (comme les plugins SEO ou les champs personnalisés) continuent de fonctionner, car ils ajoutent des données à l’API. Les plugins qui génèrent une sortie frontend, comme certains plugins de formulaires ou de sliders, doivent être remplacés par votre propre implémentation dans le frontend.
Ai-je encore besoin d’un hébergement web classique pour WordPress ?
Oui, le backend WordPress continue de tourner sur un serveur web, comme pour un site classique. Consultez notre offre d’hébergement web pour un forfait avec des performances suffisantes pour votre gestion de contenu.
Puis-je continuer à utiliser l’e-mail sur le même domaine ?
Oui, l’e-mail est indépendant de la structure technique de votre site web. Organisez cela via une messagerie professionnelle afin que votre trafic e-mail reste indépendant de votre choix d’hébergement ou de frontend.
Le WordPress headless est-il plus cher que le WordPress classique ?
Cela dépend de la complexité du projet. Vous payez peut-être pour deux environnements d’hébergement et plus de temps de développement, mais vous économisez souvent sur la maintenance et pouvez profiter de meilleures performances à long terme.
Conclusion
Le WordPress headless sépare la gestion de contenu de l’affichage, vous permettant de construire avec Next.js ou Astro un frontend rapide, sécurisé et flexible au-dessus du backend WordPress familier. Cela demande une mise en place technique plus poussée que le WordPress classique, mais offre des avantages clairs en termes de vitesse et de liberté de design pour les sites qui en ont besoin.