Utiliser un générateur de site statique avec l’API WordPress

Aujourd’hui il est possible de créer des pages web en utilisant l’administration de WordPress associée à un générateur statique. Vous avez ainsi accès au meilleur des deux mondes : WordPress pour gérer le contenu et Nuxt.js / Gatsby… pour générer des pages optimisées, légères et accessibles.
NB: Nuxt.js à partir de la version 2.13.0 peut délivrer du contenu uniquement statique (ce qui n’était pas le cas dans les versions précédentes)

Pourquoi substituer le système de thème WordPress ?

WordPress est excellent pour son interface d’administration et sa gestion de contenu. Mais l’environnement proposé pour créer la partie visible du site web, ou autrement dit les fichiers du répertoire /themes/ WordPress n’est parfois pas adaptée à certains projets.

Ce qui est souvent reproché à WordPress : ces nombreux appels à la base de données juste pour afficher une page de contenu. Il peut y avoir plusieurs dizaines de requêtes cachées et énérgivores même lorsque le visiteur souhaite afficher un article ou une page standard. D’autant que les contenus de nombreux sites utilisant WordPress changent très peu voire pas du tout.

Ne pourrait-on pas faire différement et générer des pages statiques, qui ne font aucun appel à la base de données ? Ça parait plus cohérent non ?

C’est là qu’intervient le concept de générateur de site statique, comme par exemple Nuxt.js.

C’est quoi un générateur de site statique ?

Cet outil génére à un instant donné un version statique à partir de contenu provenant d’une base de données (c’est un exemple) et un layout css / html provenant d’une autre source.

Un générateur est une des solutions qui se présente lorsqu’on veut optimiser un site web dont le contenu n’est pas amené à évoluer constamment, comme un blog ou un site vitrine. Il va assembler les contenus dynamiques (ceux de la base de données) avec le layout css / html et produire des pages html, contenant du css et du js et uniquement du contenu html / css / js. Ces pages seront servis lorsqu’un utilisateur en fera la demande. Pas de code executé côté serveur, pas de requêtes SQL.

Prenons un exemple.
Un utilisateur veut accéder à un article du blog à la page : /blog/mon-article

• Dans le cas de WordPress et son système de thème intégré, l’utilisateur en visitant la page /blog/mon-article va en réalité faire une requête http au serveur pour vérifier l’existence de la page /blog/mon-article. Puisqu’elle n’existe pas réellement, la requête http est renvoyée vers les fichiers du core de WordPress qui vont fournir les directives pour afficher la page en question. Par exemple, appeler un script dans l’entête, appliquer des modifications au contenu de l’article via un plugin, récupérer le contenu de l’article dans la base de données en faisant une requête SQL, qui elle même ouvre une authenfication auprès du serveur SQL, etc… La liste est en générale bien plus longue.
• Dans le cas de Nuxt.js, l’utilisateur fait une requête http au serveur qui recherche la page ou le dossier /blog/mon-article . Il va effectivement trouver la page /blog/mon-article/index.html (généré au préalable par nuxt). C’est fini, la page est affichée, aucune requête SQL, aucune execution de code côté serveur (Php ou autres).

C’est comme si tout le site web était constitué de pages statiques que vous auriez créé une par une.

Pourquoi utiliser un générateur de site statique comme Nuxt.js ?

Le générateur de site statique est un outil puissant qui fourni de nombreuses fonctionnalités pour optimiser vos pages web.

Les pages seront plus rapides à s’afficher grâce à la minification du code html, javascript, css. Optimisation des images, navigation rapide et transitions agréables des pages, contenu accessible et optimisé pour le référencement. Il y a beaucoup d’avantages à utiliser un générateur.

C’est aussi très agréable de développer dans un environnement avec une telle flexibilité. Enfin cela permet de n’utiliser qu’un seul language : le javascript.

Il existe de nombreux générateurs, parmi les plus connus : gatsby et nuxt.js

Pour le développement du site que vous êtes en train de lire, j’ai décidé dl utiliser Nuxt.js suite à la lecture d’un article (en anglais) expliquant comment intégrer l’admin WordPress avec Nuxt.js.
Il a été un excellent point de départ pour tester et finalement adopter Nuxt.js pour alticreation.com

La REST API WordPress, passerelle entre les deux mondes

Il est probable que vous vous posiez une question légitime. Comment choisir un autre système que le thème WordPress pour afficher du contenu WordPress ?

L’API WordPress est le chaînon manquant. Pour faire simple et rapide, l’API WordPress est capable de fournir le contenu d’un site web de façon brut à toute personne ou outil visitant une url prédéfinie.

Par exemple si vous voulez afficher tous les articles d’un blog WordPress. L’API renverra une liste des articles avec titre, contenu, auteur, date, etc. L’url /wp-json/wp/v2/posts?per_page=10 va retourner un objet json contenant les 10 derniers articles.

Libre à vous de manipuler cet objet json, maintenant qu’il est disponible et facile à intégrer.

Pour résumé, l’API WordPress est juste une autre porte d’entrée pour accéder à tout (ou presque) le contenu d’un site WordPress. Et tout type de projet / application peuvent faire des appels vers l’API. On peut même imaginer un projet en Java interrogé l’API WordPress et intégré les résultats dans un site sous Drupal. Pourquoi pas. L’intérêt de l’API et de fournir le contenu de façon agnostique et universel.

WordPress est aussi un Headless CMS

Vous rencontrerez parfois ce terme barbare (CMS sans-tête !), qui est une catégorie spécifique de CMS. Le headless CMS par opposition aux CMS traditionnels, ne fournit pas d’environnement ou d’ecosystème pour afficher le contenu. À la place il fournit une API.

WordPress avec son API offre donc cette possibilité d’être utilisé comme headless CMS puisqu’on peut s’affranchir de son système de thèmes.

Exemple d’utilisation en production

La page que vous êtes entrain de lire a été rédigée via l’administration WordPress et vous a été délivrée grâce à Nuxt.js. Voici donc un cas concret d’utilisation de générateur de site statique en combinaison avec l’API WordPress.

Vous pouvez explorer le code source, il n’a pas grand chose à voir avec le code provenant d’un thème WordPress. Pourtant tout le monde est gagnant.

Le rédacteur tire profit de l’interface d’administration de WordPress, le lecteur accède au contenu de façon rapide, optimisée, accessible. Et le serveur est solicité au minimum.

La stack nécessaire pour réaliser un projet comme celui-ci n’est pas complexe mais demande de repenser le fonctionnement du site web.

Passer d’un thème WordPress à un project Nuxt.js

Avant : un serveur unique est nécessaire (OVH par exemple), il héberge la base de données, et l’hébergement des pages PHP (dont WordPress) et de tous les fichiers images, javascript, css, etc.

Après : un serveur hébergeant l’administration WordPress et ayant les même capacités que avant.
Un autre serveur ou un nouveau service sur le même serveur capable de générer des pages statiques. Dans le cas de Nuxt.js il vous faut installer node.js et installer Nuxt.js. L’aternative que j’utilise cependant est un service clé en main et gratuit Netlify. Ce service est capable de générer à partir d’un projet nuxt.js du contenu statique et de le servir aux lecteurs. Et en plus c’est gratuit.

Sans rentrer dans les détails, il faut nécessairement repenser une partie des fonctionnalités de votre site et explorer les nouvelles possibilités que Nuxt peut vous offrir. C’est intéressant et en général simple à implémenter.

Conclusion

L’API WordPress est une porte ouverte vers un nouveau monde pour les développeurs qui veulent assurer aux utilisateurs une expérience d’administrateur WordPress tout en fournissant aux lecteurs des pages de grandes qualités et sur-mesure.