Gatsby

Qu'est-ce que Gatsby ?

Gatsby est un framework open source construit sur React pour créer des sites web. Il rassemble le contenu de fichiers, d'un CMS ou d'API dans une couche de données GraphQL, génère les pages en HTML statique au moment du build, puis ajoute React côté client. Gatsby 5 est la version majeure actuelle (5.16 au moment de la rédaction), et Netlify, qui a racheté Gatsby en 2023, pilote désormais le projet.

Comment fonctionne Gatsby

1. Source : des plugins lisent le contenu de fichiers Markdown, d'un CMS headless ou d'une API et le transforment en nœuds dans la couche de données de Gatsby.
2. Requête : pages et composants demandent en GraphQL exactement les données dont ils ont besoin, via des requêtes de page ou le hook useStaticQuery. Gatsby déduit un schéma à partir des données, que vous pouvez remplacer grâce à la personnalisation du schéma.
3. Build : Gatsby génère chaque page en HTML et regroupe le JavaScript, une forme de génération de sites statiques.
4. Diffusion et hydratation : les fichiers HTML vont sur un CDN ou n'importe quel hébergement statique, et dans le navigateur React prend le relais grâce à l'hydratation, si bien que la page se comporte comme une application React classique.

D'après gatsbyjs.com, Gatsby prend aussi en charge le rendu côté serveur, la génération statique différée (DSG) et les fonctions serverless pour les pages qui ne peuvent pas être entièrement construites à l'avance.

Où en est Gatsby aujourd'hui

Restez réaliste dans votre choix. Netlify a racheté Gatsby en 2023 et arrêté Gatsby Cloud, le produit d'hébergement payant, en faisant migrer les clients vers Netlify. Netlify a indiqué que le framework open source resterait maintenu. Des versions sortent toujours, mais à un rythme plus lent qu'aux premières années, et la communauté s'interroge sur la feuille de route. Pour un nouveau projet, comparez avec Next.js, Astro, Hugo ou Eleventy ; sur un site Gatsby existant, vérifiez avant une mise à niveau, surtout de Gatsby 4 à 5, que vos plugins fonctionnent toujours.

Exemple

Un site de documentation stocke ses guides en Markdown. Un plugin source transforme chaque fichier en nœud, un modèle de page interroge le titre et le corps en GraphQL, et au build Gatsby écrit un fichier HTML par guide. Les visiteurs reçoivent du HTML prêt depuis un CDN, ce qui garde un Largest Contentful Paint bas si images et scripts sont maîtrisés.

Erreurs fréquentes

• Ignorer la lenteur des builds. Des milliers de pages et un traitement d'images lourd allongent les builds. Utilisez le cache, limitez ce qui est reconstruit et surveillez la durée.
• Trop de plugins. Chaque plugin ajoute du JavaScript, du temps de build et un risque à la mise à niveau. Gardez uniquement ceux que vous utilisez.
• Des bundles clients volumineux. Le HTML statique ne sert à rien si le JavaScript qui l'hydrate est lourd. Fixez un budget de performance pour la taille du bundle.
• Croire que « statique » veut dire « sans backend ». Recherche, formulaires, connexions et prévisualisations appellent des API et des fonctions qui demandent leur propre capacité et leurs propres tests.
• Ne pas tenir compte du rythme du projet. Figez les versions et gardez un chemin de mise à niveau testé.

Lien avec les tests de performance et la surveillance

Un site Gatsby statique coûte peu à servir ; le risque se concentre donc dans les parties dynamiques : API, fonctions serverless et scripts tiers. Utilisez les tests de charge LoadFocus sur ces points d'accès, depuis 25 régions cloud. Le vérificateur gratuit des Core Web Vitals montre comment les vrais utilisateurs de Chrome vivent le site, et la surveillance de la vitesse de page repère les régressions après chaque déploiement. Pour des leviers front-end valables avec tout framework, voir le guide en 10 étapes pour accélérer un site (en anglais).

Questions fréquentes : Gatsby

Gatsby est-il encore maintenu ?

Oui, le projet open source publie toujours des versions, avec Gatsby 5 comme version majeure actuelle. Le rythme et la feuille de route sont plus lents qu'avant : évaluez-le selon vos besoins à long terme.

Gatsby a-t-il besoin de GraphQL ?

La couche de données de Gatsby est GraphQL et les composants l'interrogent généralement au build. Vous pouvez aussi récupérer des données dans le navigateur, comme dans toute application React.

Que s'est-il passé avec Gatsby Cloud ?

Netlify a arrêté Gatsby Cloud après le rachat de Gatsby et proposé aux clients des parcours de migration vers Netlify. Le framework open source est distinct et fonctionne toujours chez n'importe quel hébergeur.

Gatsby est-il bon pour le SEO ?

Les pages sont du HTML prérendu, que les moteurs de recherche lisent facilement. Le classement dépend toujours du contenu, de la vitesse et de la structure, pas seulement du framework.

Dois-je tester la charge d'un site Gatsby ?

Testez les parties dynamiques dont il dépend, comme les API, les fonctions et le paiement. Les pages statiques elles-mêmes sont servies par un CDN.