Découverte des Builds Incrementals dans Gatsby

Gatsby est un générateur de site statique (SSG) basé sur React. Il s’agit d’un projet open source né en mai 2015.

Avant d'entrer dans le monde des builds incrementals de Gatsby, nous allons d'abord voir quelques différents avantages de Gatsby :

• 📈 Meilleures performances
• ✅ Générateur de site statique
• 💪 Alimenté par GraphQL
• 🔐 Meilleure sécurité
• 📡 Hébergement facile (statique)
• 💙 Moins coûteux et plus scalable

Dernièrement, Gatsby a annoncé le support natif des builds incrementals sur leur Cloud. Grâce à cette nouvelle fonctionnalité, la modification des données (depuis un CMS headless) entraînera uniquement la régénération des parties concernées, offrant ainsi des builds jusqu'à 1000 fois plus rapides.

Un temps de build moyen inférieur à 10 secondes !

Cette fonctionnalité est disponible dans Gatsby sans aucune configuration (si ce n'est un flag) et quelle que soit la source de données (depuis un CMS headless). Le moteur de données de Gatsby propose un système de suivi permettant de régénerer uniquement les parties impactées par les données modifiées.

🚨 Attention, les changements de données locales ne sont pas encore compatibles avec les builds incrementals (fichiers Markdown, YML…).

Nous allons donc réaliser un site statique avec l'aide de Gatsby pour pouvoir tester et analyser cette nouvelle fonctionnalité ensemble. Attachez votre ceinture, le décollage est imminent ! 🚀

Lancement du projet

Tout d'abord, installons le CLI de Gatsby.

yarn add gatsby-cli

Puis exécuter la commande

gatsby new gatsby-site

Cela va créer un dossier gatsby-site dans le répertoire où la commande a été exécutée. Ensuite, accéder au dossier du site :

cd gatsby-site

Notre projet Gatsby est prêt à être lancé. Lançons le projet avec la commande :

yarn start

Ouvrez votre navigateur à l'adresse suivante : http://localhost:8000/

Super ! Nous avons notre projet Gatsby, il contient actuellement 3 pages :

Nous allons donc créer une dizaine de pages pour pouvoir analyser le comportement des builds incrementals de Gatsby sur un projet avec une multitude de pages et d'assets.

Un petit tour de magie et les pages sont créées ! 🧚‍♂️

Ajoutez dans chaque page une dizaine d'image à votre choix pour ajouter du contenu dans votre projet. Une fois les pages et les images ajoutées, nous pouvons donc passer à l'implémentation des builds incrementals.

C'est parti ! 🤗

Activer les builds incrementals

Passons maintenant au vif du sujet et ajoutons le support des builds incrementals sur le projet ! Pour les activer, utilisez la variable d'environnement suivante dans votre commande de build :

GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES = true

Placez donc la variable dans votre fichier package.json :

"scripts": {
    "build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },

Nous ajoutons ici l'indicateur facultatif --log-pages afin que nous puissions voir ce que Gatsby construit à chaque exécution. N'hésitez pas à laisser cela de côté si vous ne voulez pas voir de logs supplémentaires.

C'est tout pour l'implémentation des builds incrementals sur notre projet. Nous allons donc passer au déploiement de notre projet pour tester nos performances au build.

Allez encore un petit effort ! 😜

Déploiement du projet

On se retrouve sur le site de Gatsby Cloud pour déployer notre projet.

Nous allons connecter notre repository GitHub au Gatsby Cloud en toute simplicité en suivant les instructions indiquées.

Les versions incrémentielles sont disponibles en version bêta publique. Ainsi, tous les utilisateurs de Gatsby Cloud bénéficient d'un essai gratuit de 14 jours.

Petite astuce pour bénéficier des Builds Incrementals de Gatsby gratuitement avec Netlify à la fin de cet article 👀

Votre site est déployé ! Il est disponible à l'URL présente sur votre tableau de bord Gatsby ✅

Les builds incrementals seront automatiquement activés sur votre projet ! 🥳

Cela signifie que les modifications apportées à partir d'un CMS headless, entraîneront uniquement la re-génération des pages affectées par les données modifiées.

Dans cet exemple, nous avons choisi d'utiliser le CMS Contentful qui reste très simple à l'utilisation. Le tour est joué, analysons désormais nos résultats ! 🥰

Le résultat

Pour tester nos performances au build, j'ai donc modifié des textes et des images, je vous laisse admirer les logs des différents builds :

Comme vous pouvez le constater sans l'utilisation des builds incrementals nous étions à un temps de build d'environ 27 secondes sur notre projet de test.

Désormais, nous sommes à un temps de build qui varie entre 1 et 13 secondes ! 😎

Mission réussie ! 🙌

Déploiement avec Netlify

Pour conclure, nous apprendrons comment activer les versions incrémentielles de Gatsby sur Netlify pour pouvoir en bénéficier gratuitement 💪

Gatsby a introduit des versions incrémentielles dans la version 2.20.4, alors assurez-vous de mettre à niveau votre site Gatsby vers la dernière version.

Nous devons conserver le cache de Gatsby entre les versions pour que les versions incrémentielles fonctionnent, et pour cela, nous devons activer la version bêta de Netlify Build Plugins, qui prend quelques clics dans votre tableau de bord Netlify.

Les versions incrémentielles reposent sur le cache de Gatsby, nous devons donc activer netlify-plugin-gatsby-cache, qui conservera les répertoires publics et .cache de Gatsby entre les versions. Pour cela ajoutez à la racine de votre projet un fichier netlify.toml :

[[plugins]]
package = "netlify-plugin-gatsby-cache"

N'oubliez pas d'ajouter la variable d'environnement dans votre fichier package.json : GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true

Vous pouvez maintenant push vos modifications et Netlify s'occupera du reste ! ✨

Si nous regardons nos journaux de build, le premier build affichera un build complet avec nos différentes pages :

2:00:43 PM: info Done building in 31.228647017 sec
2:00:43 PM: info Built pages:
2:00:43 PM: Updated page: /404/
2:00:43 PM: Updated page: /page-2/
2:00:43 PM: Updated page: /page-3/
2:00:43 PM: Updated page: /page-4/
2:00:43 PM: Updated page: /page-5/
2:00:43 PM: Updated page: /page-6/
2:00:43 PM: Updated page: /page-7/
2:00:43 PM: Updated page: /page-8/
2:00:43 PM: Updated page: /page-9/
2:00:43 PM: Updated page: /page-10/

Sur les modifications suivantes, nous pouvons voir que la version de Gatsby est beaucoup plus rapide et ne reconstruit que la page qui a été modifiée :

2:03:56 PM: info Done building in 11.391817407 sec
2:03:56 PM: info Built pages:
2:03:56 PM: Updated page: /page-2/

Conclusion

C'est donc une petite révolution dans l'écosystème des JAMstacks (JavaScript, APIs & Markup) ! Nous pouvons enfin construire des sites statiques avec des multitudes de page, sans avoir un temps de build immense à chaque modification !

Attention tout de même, les builds incrementals fonctionnent seulement sur les changements de données. Si le code change (layouts, logique métier…), il faudra tout de même faire un re-build du site, qui, malgré les caches, peut être long.

Attention également au lock-in. Ce service Gatsby-Cloud est payant au-delà des 14 jours. La solution de Netlify est une bonne solution pour déployer votre site sans passer par le Gatsby Cloud. Les ressources et liens divers qui m'ont aidé à réaliser cet article :

• Doc Netlify
• Doc Gatsby
• Introducing Incremental Builds

Le code source créé pour ce projet est disponible sur Github :

• Repo Github

N'hésitez pas à nous laisser votre avis si vous avez/allez implémenter cette feature !

👋