Passez à un site internet moderne, ultra rapide et performant avec Gatsby JS ou Next.js.

Depuis quelques années, je développe des sites sur mesure avec WordPress, Gutenberg, PHP et ACF Pro.

Il y a beaucoup d'avantages à utiliser WordPress (simplicité d'utilisation pour les clients, prise en main hyper facile, une communauté gigantesque, une énorme quantité de plugins etc...)

Mais depuis quelques temps je me disais que WordPress c'est quand même vieillot. A moins d'utiliser WP Rocket ou autre pluggin de cache payant, impossible d'avoir des sites à 100/100 en performance de rapidité, beaucoup de code CSS et JS inutile, les mises à jour de WordPress et des plugins à faire continuellement sans pour autant être à l'abris des hackers, bref, j'ai commencé à regarder un peu ce qui se passait du côté de React JS.

Alors React c'est génial mais le problème c'est que ça ne fait pas la partie back-end. Il faudra quoiqu'il arrive créer une api ou avoir une base de donnée quelquepart. Alors je me suis dit qu'il serait pas mal de pouvoir utiliser WordPress pour le back-end de mes sites, et React pour le front-end.

Je ne suis évidemment pas le premier à avoir eu cette idée. Il existe des tutoriels pour lier React à WordPress mais c'est assez complexe et j'avais envie d'un outil simple pour tester le concept et voir si c'était faisable.

Encore une fois, d'autres petits malins avaient eu l'idée avant moi : j'ai alors découvert Gastby JS. C'est un framework javascript basé sur React. A la base il permet de bien organiser son code React, il génère un site statique (HTML, JS, CSS) qui permet d'obtenir des sites ultra-rapides et sécurisés, et de régler le problème de SEO des sites React, et enfin il fournit une librairie de plugins hyper complète. Et parmi ces plugins, il y en a qui permettent de lier son React à :

• un système de Markdown (cool mais ce n'est pas le genre de configuration que l'on peut proposer à un client lambda)

• des Api - cool mais rien d'étonnant jusque là !

• mais aussi toutes sortes de CMS ou gestionnaires de contenus en mode "headless" : Contentful, Strapi et ... WordPress (et même Drupal et Magento)!!

Gatsby est un générateur de site statique. Pour faire simple, le site entier est construit à chaque modification ou à chaque ajout de contenu. Cela veut dire que ça prend un peu plus de temps à l'administrateur pour voir ses modifications effectivement en ligne (quoique les dernières version de Gatsby permettent des "incremental builds" ce qui veut dire que Gatsby ne reconstruit que la partie du site qui a été modifiée). En revanche, côté visiteur, quand celui-ci arrive sur le site, toutes les pages, tous les articles, les images etc... sont déjà disponibles via un CDN. Il n'y a pas de requête php / sql au serveur avec attente de retour des données. En conséquences, la navigation sur un site Gatsby est plus que rapide, elle est "instantanée" !

Fantastique ! Pour me familiariser avec l'outil j'ai commencé par un site en Mardown puis, avec Contentful, j'ai refait mon portfolio (ici présent !!). Et là j'ai vu la puissance du truc ! J'ai été plus loin en reprenant une vieille application https://mesplatsdujour.fr (codée à l'époque en PHP et MySQL) avec WordPress en back-end et Gatsby pour le front-end.

Là où avec WordPress classique on allait dans le template php qui va bien pour récupérer the_title, the_content, les champs ACF etc, on peut faire exactement la même chose avec une requête GraphQL associé au plugin WordPress wp-graphql (pour récupérer les champs ACF, il faudra aussi wp-graphql-acf). Alors bien-sûr il y a un temps d'adaptation pour prendre l'outil en main, mais après on choisit exactement les données que l'on veut dans notre requête GraphQL dans WordPress donc pas de data inutiles. Puis on boucle sur les données récupérées pour construire nos éléments HTML avec JSX.

Pour l'hébergement, vous pouvez héberger le site chez Netlify gratuitement. Aucun risque de piratage puisque les fichiers sont uniquement des fichiers statiques HTML, CSS, JAVASCRIPT et vos images. Des solutions comme ContentFul permettent de créer votre back-end gratuitement (pour des sites vitrine simples). Pour des sites un peu plus complexes, vous pouvez travailler avec un back-end WordPress dont vous n'utiliserez que le back-office et que vous pourrez héberger sur un hébergement basique ou sur un sous-domaine à vous.

Après avoir envoyé notre repository sur Github, Bitbucket ou autre, et après avoir créé un nouveau site sur Netflify, on peut déployer le site en un click (le site sera construit - buildé ! - en 2 à 4 minutes.

Alors je ne dis pas que cette méthode de développement est plus rapide qu'avec un WordPress classique. Il y a pas mal de trucs spécifiques à prendre en main là où WordPress faisait pas mal de choses tout seul.

Par contre le résultat est tout de même incroyable en terme de performance et puis on va pas se mentir, c'est assez sympa pour un dev de découvrir autrechose que php.

Donc pour résumer quels sont les côtés négatifs de Gatsby utilisé avec WordPress comme CMS headless:

• plus compliqué d'utiliser des thèmes tout prêts quoiqu'il commence à y avoir une belle base de thèmes Gatsby WordPress disponibles. En tout cas, à privilégier pour des thèmes sur mesure.

• certains éléments "tout faits" dans WordPress sont à refaire par exemple les commentaires sur les articles, les formulaires de contact, les formulaires de recherche... Mais on trouve déjà pas mal d'alternatives à ce jour.

• le site et le back-end WordPress seront hébergés à deux endroits différents

• même pour des petites modifications de contenu, il faut à chaque fois attendre quelques dizaines de secondes voir quelques minutes pour que le site se reconstruise intégralement. Ce qui peut être rédhibitoire pour des sites dont le contenu est mis à jour très souvent. Ceci dit les dernières versions de Gatsby permettent de réduire considérablement le temps de "Build"

Les avantages maintenant :

• des sites HYPER rapides à charger et navigation "instantanée" !

• plus de problème de sécurité

• plus de maintenance de WordPress et des plugins

• hébergement potentiellement gratuit avec Contentful

• déploiement du site directement avec Github ou Bitbucket, plus besoin de FTP (sauf pour le WordPress)

• développement beaucoup plus "fun" pour les devs

A mon avis cette façon de travailler avec WordPress risque de se développer de manière conséquente dans les années à venir. Alors, prêt à développer des applications modernes en utilsant la JAMstack ? Vous avez déjà un site WordPress classique et souhaitez l'utiliser avec Gatsby ou Next.js ?

A bon entendeur...