Blog

Qu'est-ce que GatsbyJS ?

GatsbyJS est un générateur de site statique construit avec ReactJS et alimenté par GraphQL. Gatsby permet de réaliser des sites Web et des applications statiques et rapides, il récupère des données pour votre site à partir de diverses sources, notamment des sites Web existants, des appels API et des fichiers via GraphQL.

Plusieurs utilisateurs essayent Gatsby comme Airbnb Data Science et Engineering Blog et aussi le site canadien de la marque Braun des produits d'épilation et de soins capillaires haute performance est hébergé avec Gatsby.

Qu'est-ce qu’un site statique ?

Les sites statiques existent depuis très longtemps, En réalité ils sont probablement les sites web originaux, seulement le HTML,CSS et Javascript, pas de code au niveau de serveur ni de base de données.

Les générateurs de sites statiques génèrent le contenu HTML côté client lors de l'exécution et pendant la construction. Ensuite, une fois chargé, React prend le relais, et vous avez une application d'une seule page!

Les générateurs de sites statique(ex: Gatsby) ce différent du rendu côté serveur(ex: Drupal). La principale différence est qu'il n'y a pas de code côté serveur. Ainsi que Gatsby ne reproduit rien sur le serveur lorsqu'une demande est faite. Tout cela se fait au moment de la création de l'application.

Certains des avantages d'un site statique sont: la vitesse, l'optimisation des moteurs de recherche et la sécurité. Non seulement les sites créés avec Gatsby sont extrêmement rapides, mais ils ont une sécurité implicite car il n'y a pas de base de données ni de serveur.

Développer votre site avec GatsbyJS :

La structure du code est très simple. Vous disposez de trois dossiers dans le répertoire src: composants, images et pages.

Le plugin gatsby-image et la possibilité d'utiliser GraphQL simplifie vraiment la transmission de données dans les composants.

L'un des inconvénients de ne pas avoir de serveur est que la recherche sur votre site n'est pas simple. Cela peut être contourné en utilisant d'excellents outils comme l'Algolia.

Gatsby a d'excellents guides pour implémenter cette fonctionnalité avec Algolia ou d'autres outils comme Lunr et ElasticSearch.

Concernant le déploiement de votre site, la commande "gatsby serve" s'en charge. Le site est envoyé directement chez l'hébergeur, Netlify ou Github pages par exemple et si le site est sur un repo Git il est aussi possible de configurer des webhooks qui déclencheront une compilation à chaque commit. Les webhooks peuvent aussi être configurés lors de la modification du contenu si celui-ci est hébergé sur un CMS headless le supportant comme Contentful ou DatoCMS.

Conclusion

Gatsby comporte tous les avantages des sites Web statiques, tels que la vitesse, la sécurité et le référencement, et il est particulièrement merveilleux pour ceux qui aiment faire un peu de codage et ne veulent pas utiliser Drupal ou WordPress.