La vitesse d’un site web est un critère auquel Google accorde de plus en plus d’importance. Les dernières années, il y a eu une grande évolution dans le developpement du concept « site statique ». Une des plateformes que j’ai recherchée est Gatsby, un moteur pour des sites statiques, mais pas seulement…

Avec l’utilisation des CMS comme WordPress on a pris l’habitude d’attendre jusqu’à ce que la page web charge quand l’internaute demande la voir. L’URL est saisi, le navigateur fait une requête au serveur, qui va chercher le contenu dans la base de données et construit la page concernée. Quand ce processus est fini, le serveur envoie la page en HTML, CSS et Javascript et le navigateur affiche la page.

Pour exécuter tout ça, il faut du temps (quelques secondes). Qui ne se souvient pas l’époque où on faisait des pages statiques, qui ne devraient pas être construites par un serveur, mais étaient envoyées tout de suite à partir de leur site de stockage. C’était vite, non ? Maintenant, certainement parce qu’un site web est de plus en plus affiché sur des navigateurs mobiles, on redemande cette vitesse.

Entretemps, on a aussi pris l’habitude de pouvoir ajouter, adapter ou effacer le contenu d’un site web facilement. Une entreprise n’a pas forcement envie de devoir creuser dans le code d’un site afin d’adapter la date d’un événement, du contenu temporaire ou bien des mesures prises dans le contexte d’une pandémie.

Serait-il une bonne idée de combiner la vitesse d’affichage, avec la flexibilité d’adaptation par un client ? Ici les frameworks pour construire des sites statiques viennent dans l’image. En ayant expérimenté déjà en 2014-2015 avec des plateformes comme Jeckyll et Hugo, je n’étais pas trop séduit, parce que, oui, la vitesse liée aux pages web statiques était là, mais  leurs concepts étaient trop techniques pour qu’une personne lambda (le client) puisse adapter ou ajouter du contenu.

« Avec Gatsby, on a le meilleur des deux mondes. Cette plateforme combine la vitesse des pages web statiques et la flexibilité des sources de données. »

Gatsby est rapide dans tous les sens. C’est un framework « open source » basé sur React qui aide les développeurs à construire des sites web et des apps avec une vitesse incroyable.

Comment ça marche ?

Imaginez-vous que vous pouvez utiliser presque n’importe quelle source de données pour alimenter votre site :

• des CMS comme Contentful, Drupal, WordPress, etc.
• des fichiers Markdown
• des données (des API, bases de données, YAML, JSON, CSV, etc.)

La construction des pages se fait au moment du développement !

Le développeur connecte le site aux sources de données différentes (on peut même faire appel à plusieurs sources en même temps) et fait la mise en page du site. Au moment du « build » du site, Gatsby s’occupe — d’office — de plein de techniques : construction des pages statiques, optimalisation des images en utilisant la taille idéale pour chaque utilisation d’image (en plus, les images s’affichent avec une technique « lazy loading » qui permet de ne pas devoir télécharger toutes les ressources d’une page en une fois, mais seulement à partir du moment où elles sont affichées). S’il y a des liens sur la page, Gatsby va même déjà chercher le contenu des pages où les liens pointent (pre-fetching) et les stocke dans la mémoire du navigateur. Comme ça, quand l’internaute clique sur ce lien, la page concernée s’affiche quasi tout de suite !

Énormément de possibilités !

Gatsby offre plein de possibilités d’application. Il y a pas mal de plug-ins qui offrent encore plus de flexibilité et puissance. On trouve par exemple un plug-in SEO qui permet d’optimaliser le site pour les résultats de recherche.

En injectant des modules pour des formulaires de contact ou bien pour l’achat en ligne en utilisant des plateformes de paiement comme Stripe, le développeur dispose de plein d’outils (en plus, chaque outil est l’un des meilleurs de sa catégorie) pour créer un site web assez puissant.

Vous voulez mettre à jour ou rajouter du contenu vous-même (vous avez un blog ou vous vendez des articles en ligne) ? La manière la plus simple est d’ajouter des fichers Markdown dans un dossier pré-défini et de déclencher une mise à jour automatique du site web via Github.

Plus habitué à l’utilisation d’un CMS ? Gatsby peut-être lié dynamiquement à des CMS comme Contentful, Strapi, Sanity ou même un « headless » WordPress. A chaque adaptation du contenu résultera une mise à jour du site automatique en adaptant uniquement les fichiers qui sont modifiés.

Plusieurs de manières de publier et réduction des frais d’hébergement

Un avantage énorme de Gatsby est que les pages statiques n’ont pas besoin d’un serveur coûteux qui construit les pages du site web, ni de base de données en ligne, si on opte pour cette solution. Les frais d’hébergement seront alors fort diminués, voire éliminés : on peut publier le site sur des CDN comme Netlify, Github Pages, etc., qui donnent un volume gratuit déjà très sympatique pour le stockage et construction automatique des mises à jour du contenu du site. On a juste besoin d’un nom de domaine et c’est parti !

Gatsby pour un site web puissant et moderne

Après avoir fait mes recherches et mes expérimentations avec Gatsby, je ne peux que conclure qu’étant « open source », Gatsby offre une plateforme moderne et puissante avec des possibilités quasi-illimitées. La programmation d’un site avec Gatsby n’est pas vraiment pour des débutants. On part du principe qu’il y a quand même une petite connaissance de React. Il y a quand même déjà une fonctionnalité de base très étendue, des templates sont disponibles et la documentation est claire et assez élaborée (pour le moment seulement en anglais).

Devenir indépendant d’un serveur web, un site fait avec Gatsby n’utilise pas seulement les dernières techniques web, mais peut également réduire vos frais d’hébergement.

En conclusion : Gatsby, ou des plateformes pareilles, sont le futur !