Aller au contenu
  1. Wordpress
  2. Astro + WordPress Headless : une architecture moderne pour des sites rapides et SEO-friendly

Astro + WordPress Headless : une architecture moderne pour des sites rapides et SEO-friendly

Astro + WordPress Headless : une architecture moderne pour des sites rapides et SEO-friendly

WordPress reste aujourd’hui l’un des CMS les plus utilisés pour gérer du contenu. Son interface d’administration est connue, son écosystème est immense et il permet à une équipe de publier facilement des pages, des articles ou des contenus personnalisés.

Mais utiliser WordPress ne signifie plus forcément utiliser un thème WordPress pour afficher son site.

Avec une architecture headless, WordPress peut uniquement servir de back-office tandis qu’un framework moderne comme Astro prend en charge toute la partie visible du site.

C’est une approche particulièrement intéressante pour construire des sites rapides, légers et optimisés pour le référencement.

Qu’est-ce qu’un WordPress headless ?

Dans une installation WordPress classique, WordPress remplit deux rôles :

  • il permet d’administrer le contenu ;
  • il génère également les pages HTML affichées aux visiteurs.

Dans une architecture headless, ces deux fonctions sont séparées.

WordPress conserve son rôle de CMS :

WordPress → articles, pages, médias, catégories, champs personnalisés

Mais le frontend est développé indépendamment :

Astro → interface, templates, performances, SEO

Les deux communiquent grâce à une API.

WordPress dispose nativement d’une REST API permettant d’accéder aux articles, pages, médias, catégories et autres contenus sous forme de JSON.

L’API d’un site WordPress est généralement accessible depuis :

/wp-json/wp/v2/

Il est également possible d’utiliser GraphQL, notamment avec une extension comme WPGraphQL. Astro documente officiellement les deux approches pour connecter WordPress à un projet Astro.

Pourquoi utiliser Astro ?

Astro est particulièrement adapté aux sites éditoriaux, vitrines, blogs et sites dont une grande partie du contenu ne nécessite pas de JavaScript côté navigateur.

Sa philosophie est relativement simple : envoyer le moins de JavaScript possible au visiteur.

Contrairement à certaines architectures frontend entièrement basées sur JavaScript, Astro peut générer directement des pages HTML.

On obtient donc une architecture très intéressante pour un site professionnel :

WordPress

API REST ou GraphQL

Astro

Pages HTML optimisées

Navigateur

Astro peut récupérer les contenus WordPress puis générer automatiquement les pages correspondantes. La documentation officielle montre notamment comment récupérer une liste d’articles WordPress et générer les pages individuelles à partir de l’API.

Des grandes marques utilisent déjà Astro

Astro n’est pas réservé aux petits sites ou aux projets expérimentaux.

Le framework est aujourd’hui utilisé sur des projets web associés à des marques reconnues comme IKEA, Porsche, Unilever, Michelin, Cloudflare ou Netlify, parmi de nombreux autres acteurs référencés dans le Showcase officiel Astro

D’autres acteurs comme Mattel, Garmin, Mistral AI, Fathom Analytics et Pokémon ont également été mis en avant parmi les utilisateurs d’Astro.

Cela ne signifie pas nécessairement que l’intégralité de leur infrastructure web fonctionne avec Astro : certaines entreprises l’utilisent pour leur site principal, tandis que d’autres l’adoptent pour une documentation, un espace éditorial, une landing page ou une partie spécifique de leur écosystème.

Cette adoption montre néanmoins qu’Astro est désormais suffisamment mature pour être utilisé sur des projets à forte visibilité et à grande échelle.

Le meilleur des deux mondes

L’intérêt principal de cette architecture est de ne pas avoir à choisir entre le confort d’un CMS et les performances d’un frontend moderne.

Côté administrateur

L’équipe continue à utiliser WordPress.

Elle retrouve :

  • l’éditeur Gutenberg ;
  • les articles et les pages ;
  • la médiathèque ;
  • les catégories et les tags ;
  • les utilisateurs ;
  • éventuellement ACF pour gérer des contenus structurés.

Il n’est donc pas nécessaire d’apprendre un nouveau CMS.

Côté visiteur

WordPress n’est plus responsable de l’affichage du site.

Astro contrôle entièrement :

  • le HTML ;
  • les composants ;
  • le CSS ;
  • les animations ;
  • les données structurées ;
  • les balises SEO ;
  • les performances frontend.

Cette séparation donne beaucoup plus de liberté au développeur.

Astro et WordPress : un excellent choix pour les performances

Sur un WordPress traditionnel, chaque page peut nécessiter l’exécution de PHP, des requêtes vers la base de données et le chargement de nombreux scripts liés au thème ou aux extensions.

Dans une architecture Astro générée statiquement, une grande partie de ce travail peut être effectuée au moment du build.

Le visiteur reçoit alors directement une page HTML déjà générée.

Cela peut réduire fortement :

  • le temps de réponse serveur ;
  • le JavaScript envoyé au navigateur ;
  • le nombre de requêtes ;
  • la dépendance aux plugins frontend ;
  • la charge exercée sur WordPress.

Pour un site vitrine ou éditorial, c’est particulièrement intéressant.

Et pour le SEO ?

Une architecture headless n’améliore pas automatiquement le référencement.

Un mauvais site Astro peut être moins bien optimisé qu’un excellent thème WordPress.

En revanche, Astro donne au développeur un contrôle très précis sur ce qui est envoyé aux moteurs de recherche.

On peut notamment gérer directement :

  • les balises title et meta description ;
  • les URLs canoniques ;
  • Open Graph ;
  • les données structurées Schema.org ;
  • les sitemaps ;
  • les redirections ;
  • le maillage interne ;
  • les images ;
  • le HTML sémantique.

Le fait de générer du HTML directement côté serveur ou lors du build évite également de dépendre d’un rendu JavaScript exclusivement côté client pour présenter le contenu principal.

Pour un projet orienté SEO, GEO et visibilité dans les moteurs de recherche et assistants IA, cette maîtrise du HTML est particulièrement intéressante.

REST API ou WPGraphQL ?

Il existe principalement deux façons de connecter Astro à WordPress.

WordPress REST API

C’est la solution la plus simple pour commencer.

Elle est intégrée nativement à WordPress et expose notamment des endpoints pour les articles, les pages, les catégories, les tags et les médias.

Par exemple :

/wp-json/wp/v2/posts

permet de récupérer les articles.

Pour de nombreux sites vitrines ou blogs, la REST API est largement suffisante.

WPGraphQL

WPGraphQL ajoute une API GraphQL à WordPress.

L’avantage est de pouvoir demander précisément les informations nécessaires dans une seule requête.

Cela devient particulièrement intéressant lorsque le modèle de contenu est plus complexe :

  • nombreux Custom Post Types ;
  • champs ACF ;
  • relations entre contenus ;
  • taxonomies personnalisées ;
  • données imbriquées.

Astro prend en charge ce type d’architecture et référence explicitement GraphQL comme alternative à la REST API pour WordPress.

Exemple simple avec Astro

Un projet Astro peut par exemple récupérer les derniers articles WordPress :

const response = await fetch(
  "https://cms.exemple.com/wp-json/wp/v2/posts"
);

const posts = await response.json();

Astro peut ensuite utiliser ces données pour construire les pages du blog.

Le CMS peut être installé sur :

cms.exemple.com

et le site public sur :

www.exemple.com

Le visiteur n’a même pas besoin de savoir que WordPress est utilisé derrière le site.

Que se passe-t-il lorsqu’un article est publié ?

C’est une question importante dans une architecture statique.

Si Astro génère les pages au moment du build, publier un nouvel article WordPress ne suffit pas toujours à l’afficher immédiatement sur le site.

Il faut déclencher un nouveau déploiement.

On peut par exemple mettre en place :

Publication WordPress

Webhook

GitHub / plateforme de déploiement

Nouveau build Astro

Nouvel article en ligne

Le processus peut être entièrement automatisé.

Une autre possibilité consiste à utiliser Astro avec du rendu serveur pour certaines routes lorsque le contenu doit être récupéré dynamiquement.

Le choix dépend donc du projet.

Une surface d’attaque frontend réduite

Une architecture headless apporte également une séparation intéressante du point de vue de la sécurité.

WordPress peut être isolé sur un domaine dédié comme :

cms.exemple.com

et le public consulte uniquement le frontend Astro.

Le frontend ne dépend plus directement du thème WordPress ni de nombreux plugins nécessaires à son affichage.

Cela ne dispense évidemment pas de maintenir et sécuriser WordPress, mais le CMS peut être davantage isolé de la partie publique.

Les limites du WordPress headless

Cette architecture possède aussi quelques contraintes.

Elle est plus technique qu’un WordPress traditionnel.

Certaines fonctions fournies automatiquement par WordPress doivent être recréées ou adaptées côté frontend :

  • recherche ;
  • aperçu des brouillons ;
  • formulaires ;
  • commentaires ;
  • pagination ;
  • authentification ;
  • WooCommerce ;
  • extensions SEO ;
  • redirections.

Les plugins WordPress qui modifient directement le frontend ne fonctionnent généralement plus de la même manière.

Par exemple, installer un plugin qui ajoute automatiquement un composant dans un thème WordPress ne signifie pas que ce composant apparaîtra dans Astro.

Il faut donc réfléchir à l’architecture dès le début du projet.

Et WooCommerce ?

WordPress headless peut également être utilisé avec WooCommerce, mais la complexité augmente nettement.

Un simple catalogue produit est assez facile à exposer.

Un véritable e-commerce doit en revanche gérer :

  • panier ;
  • sessions ;
  • compte client ;
  • paiement ;
  • stocks ;
  • commandes ;
  • variations ;
  • promotions.

Pour un site vitrine avec un blog, Astro + WordPress est relativement simple.

Pour une boutique WooCommerce complète, il faut évaluer plus précisément l’intérêt d’une architecture headless avant de se lancer.

Quand choisir Astro + WordPress ?

Cette architecture est particulièrement adaptée pour :

  • un site vitrine professionnel ;
  • un site d’agence ;
  • un blog ;
  • un média ;
  • un site de contenu SEO ;
  • une documentation ;
  • un site corporate ;
  • un projet multilingue ;
  • un site avec beaucoup de landing pages.

Elle devient particulièrement intéressante lorsque l’on souhaite conserver WordPress comme outil éditorial sans subir les contraintes d’un thème WordPress traditionnel.

WordPress n’est donc pas remplacé

C’est probablement le point le plus important.

Le headless ne consiste pas forcément à abandonner WordPress.

Au contraire.

Il consiste à utiliser WordPress là où il est excellent : la gestion de contenu.

Et à confier l’expérience frontend à un outil spécialement conçu pour cela.

Avec Astro, l’architecture devient alors :

WordPress pour éditer.
Astro pour afficher.
Une API pour connecter les deux.

Pour certains projets, un WordPress classique restera la solution la plus simple et la plus économique.

Mais pour un site où les performances, le SEO, la qualité du frontend et l’évolutivité sont prioritaires, Astro + WordPress headless constitue aujourd’hui une architecture particulièrement intéressante.

Parlons de votre projet

Vous souhaitez améliorer votre présence en ligne ou vos outils digitaux ?

Que ce soit pour créer un site web, optimiser votre visibilité, intégrer l’IA ou développer un outil métier sur mesure, échangeons sur vos objectifs et les solutions les plus adaptées à votre activité.

Web

Site professionnel

IA & SaaS

Outils sur mesure

SEO / GEO

Visibilité durable