Wordpress & JAMstack ! Gatsby en front, WP en CMS headless

L’idée de combiner Gatsby, spécialisé dans les sites statiques et WordPress, le leader des sites dynamiques, peut paraitre saugrenue de prime abord… À moins qu'on tienne là un combo idéal du dev web moderne.

Avec l’avènement du JAMstack la tentation est grande de franchir le pas et de profiter des avantages des sites statiques pour profiter des avantages en termes de rapidité, de sécurité et de simplicité. Mais WordPress à tout de même de nombreux points forts : son interface intuitive, déjà utilisé par beaucoup de monde, son importante base de plugins et son importante communauté. Heureusement l'écosystème JAMstack évolue et s’adapte très vite.

Les sites statiques font leur grand retour sur le devant de la scène, en partie à cause des sites WordPress surchargés de plugins de de javascript et de CSS qui ralentissent le temps de chargement et font travailler le processeur. Les sites statiques évitent beaucoup de ces désagréments et offrent aussi une meilleur sécurité et scalabilité pour un coût d'hébergement bien moindre. Ce genre de site est aussi facilement versionable avec Git.

Pour passer un site WordPress en statique, la solution la plus simple et d’utiliser le plugin WP2Static qui exporte un site WordPress en HTML et l'héberge dans un sous dossier, sur Netlify ou autre hébergement de votre choix.

Mais nous allons ici nous intéresser à un usage différent qui consiste à n’utiliser WordPress qu’en tant que CMS headless. WordPress est alors utilisé uniquement pour créer, éditer et stocker le contenu (pages, articles, images, etc). L’affichage du frontend est assuré par un site custom, à développer à l’aide d’un framework comme React à l’aide de Gatsby (React), ou Vue avec l’aide de VuePress (Vue).

Ces deux générateurs sont les seuls qui, à ma connaissance, permettent une connexion simple à WordPress mais il est toujours possible d’utiliser l’API WordPress ou le plugin WPGraphQL. On peut alors utiliser l’un des nombreux autres générateurs de sites statiques (SSG). Que vous pouvez les retrouver sur StaticGen.

En effet, VuePress et Gatsby offrent une solution toute prête pour utiliser la base de données de WordPress. Via GraphQL, pour VuePress, à l’aide d’un serveur node qui se connecte à la base de données WP. Et chez Gatsby, avec un plugin (gatsby-source-wordpress) qui utilise l’API WordPress.

On peut ensuite récupérer le contenu des articles, des pages, des menus, et d'à peu près toutes les infos qui permettront de reconstruire le site. Avec le même contenu mais une interface différente.

Pourquoi choisir WordPress + Gatsby

Pas besoin d’un base de données et de backends complexes
Il n’y a aucun logiciel ou base de données à attaquer
Découplement du contenu et du code
Sites non surchargés par des tas de plugins
Meilleur performance / temp de chargement
Et donc meilleur ranking dans le SERP
Versionnage du code
Permet une customisation beaucoup plus profonde du code
Avoir un front séparé signifie que le développeur a le contrôle, le client devra payer pour des modifications qu’il aurait peut être pu faire lui même avec wordpress mais cela assure aussi que le site reste optimisé et qu’on ajoute pas une nouvelle couche de plugins et des sliders à chaque nouvelle page créée. Ca apporte en fait de la sécurité et de la stabilité au site.
WordPress est utilisé par quelque chose comme 30% des sites du monde, cela signifie que beaucoup de monde s’intéresse à hacker WordPress. En servant uniquement un tas de fichiers html, il n’est pas impossible d’avoir un quelconque problème de sécurité mais les chances deviennent extrêmement faibles.

Inconvénients

Moins de plugins disponibles
Moins de thèmes
Rebuilder le site à chaque modification peut être contraignant et prend plus de temps à chaque fois que du contenu est ajouté. Si un header ou une sidebar “Articles récents” présent sur toutes les pages du site est ajouté, il faudra alors rebuilder toutes les pages.
Soit on build a chaque fois et c’est lourd, soit on build tous les X jours et le site n’est plus mis à jour aussi fréquemment qu’avant mais cela peut aussi être l’occasion d’adopter de bonnes pratiques, le site buildé uniquement avant de passer en prod permettant de détecter des problèmes avant de builder la version prod.
Pour un site simple, le développement demandera un peu plus d’expertise que pour WordPress, ou en tout cas une compétence un peu plus rare et peut donc coûter plus cher.
Il faut trouver des solutions alternatives aux éléments dynamiques du site original, tel que les formulaires de contact, commentaires sur un article, champ de recherche.

La plupart des développeurs s’étant essayé au JAMstack aiment la philosophie et la simplicité, certains même disent avoir retrouvé la joie dans le développement web !

Retrouver la joie dans le développement WordPress, avec React, Gatsby & GraphQL :

Il va de soi que si vous travaillez avec un stack fun, vous apprécierez davantage votre travail. La combinaison de WordPress, React, Gatsby et GraphQL est exactement ça - fun. - Mark Bloomfield

Un site statique s'héberge très simplement. Sur Netlify par exemple qui est très agréable à utiliser, l’interface est bien conçue, il existe de nombreuses fonctionnalités accessibles depuis la web app : plus besoin de SSHer pour éditer des virtualhosts, générer des nouveaux certificats Let's Encrypt upgrader la version de PHP ou autres tâches qui pour un développeur front peuvent parfois paraître ennuyeuses et intéressantes.

On commence à voir de nombreux tuto sur le sujet tel que ceux de Jason Lengstorf, précédemment responsable des relations développeurs chez Gatsby, aujourd’hui développeur principal expérience ingénieur chez Netlify et auteur des cours Learn with Jason. Ceux de Tim Smith ou les tutos de Netlify.

Si vous vous intéressez au SEO, vous n’êtes pas sans savoir que la performance, le temps de chargement est crucial pour bien ranker dans les moteurs de recherche. Passer en statique permet d’optimiser la webperf à moindre frais, sans se battre pendant des heures avec des plugins de caching, Cloudflare et autres optimisation Apache. En fait c’est tellement rapide, que même si il reste des choses à optimiser et que le score Pagespeed ou Yslow reste sous 90%, vous ne vous en soucierez même plus. Le temp de chargement perçu est sans comparaison avec un site WordPress.

Voici grossièrement la procédure pour convertir son site WordPress en site statique avec Gatsby :

Installer les plugins WordPress GraphQl et GraphiQl
Créer un repo Git
Créer une nouvelle app Gatsby (ex: gatsby new gatsby-wordpress)
Installer et configurer gatsby-source-graphql
Créer un template de page
Design, CSS
Ajouter le support des blocks Gutenber (npm install @wordpress/block-library)
Récupérer les menus et le recréer sur le site Gatsby
Builder et déployer
1. Au build, Gatsby génère les pages en puisant dans la base de données WordPress en passant par l’API WordPress.
Configurer les webhooks
1. Le site alors ensuite rebuildé automatiquement à chaque modification à l’aide de webhooks qui déclenchent un rebuild (sur Netlify par exemple). Grâce à un webhook Github quand le repo Git est mis à jour. Ou par un webhook WordPress quand le contenu est actualisé (nécessite un plugin WP).

Il nous reste cependant à régler les problèmes sus-cités. Étant statique, le site manque évidemment toutes les fonctionnalités dynamiques telles que des formulaires de contact, des commentaires sur un article de blog ou un système de membre ou de compte utilisateur. Fort heureusement des solutions existent pour palier à ces limitations.

Internationalisation

WPGraphQL Polylang Extension

wp-rest-polylang

Advanced Custom fields

Le plugin Advanced Custom Field (ACF) est très populaires chez les développeurs WordPress.

Il permet de créer des champs personnalisés pour tout type de message ou de page, remplacer les valeurs par défaut, créer un nombre illimité de champs pour l'utilisateur, allant des éditeurs WYSIWYG et des sélecteurs de date en passant par les galeries et les champs répétitifs. Grâce à cet outil, on peut vraiment personnaliser le site pour qu'il réponde exactement aux besoins du client.

ACF ne représente pas vraiment un problème pour notre site statique puisqu’il existe un plugin (ACF to REST API) qui, comme vous l’aurez sûrement déjà deviné, expose les données des champs personnalisés à l'api REST afin de pouvoir les utiliser dans un site Gatsby.

La dernière version de WPGraphQL est désormais compatible avec ACF

Menus

L'une des principales fonctionnalité de WordPress est la possibilité pour les utilisateurs de créer et de mettre à jour facilement les menus de leur site. Hardcoder les menus dans notre nouveau site Gatsby ne serait pas très élégant puisqu’on empêcherait alors les utilisateurs du backend de créer de créer et modifier des menus. Heureusement il existe encore une fois un plugin (WP API Menus) qui crée des routes REST pour les éléments du menu. Veuillez noter : selon la documentation de gatsby-source-wordpress, il doit s'agir de cette version du plugin et non de la plus récente. La version la plus récente ne fonctionnera pas.

SEO

Plugin Gatsby

gatsby-plugin-react-helmet

Plugins WordPress

Yoast to REST API - WordPress plugin

WP REST Yoast Meta

Commentaires

Disqus (10$/month)

Commento (open source)

Facebook Comments

Staticman. Gère le contenu généré par les utilisateurs et le transforme en fichiers de données qui se trouvent dans un dépôt GitHub avec le reste du contenu.

Netlify forms et Netlify Lambda functions. Tous les commentaires sont postés avec un formulaire et, une fois approuvés, affichés directement sur le site via un build. Aucun code JavaScript n'est nécessaire pour les afficher dans le navigateur. Tuto sur CSS Tricks

Avec Reddit, en créant un subreddit pour le site et un nouveau post Reddit pour chaque article du site et en collant le lien en bas de la page de l’article. D’autres idées ici.

Sitemaps

Gatsby-plugin-sitemap

Optimisation des images

Gatsby possède de nombreuses fonctionnalités d’optimisation des images qui permettent par exemple de lazy loader des placeholders moins lourd générées au build. Les placeholders générés peuvent être des versions floues des images ou des équivalent redessinées en SVG, magnifique à observer. Plus d'infos par ici.

gatsby-image

gatsby-plugin-sharp

Search

gatsby-plugin-algolia

E-commerce

Gatsby-plugin-snipcart

Gatsby-source-stripe

Le mouvement JAMstack reste pour l'instant limité à des développeurs intéressés par cette nouvelle technologie qui sont vites conquis par cette façon simple et rafraîchissante de faire du dev web mais les avancées sont rapides et prometteuses.