Qu'est-ce que le cadre Gatsby

Publié: 2023-06-19

Gatsby est un cadre exceptionnel pour le développement de sites Web statiques. C'est l'une des nombreuses technologies qui prennent en charge la méthodologie de développement Web Jamstack, qui permet aux sites Web et aux applications de fonctionner indépendamment d'un serveur Web.

Pour ceux qui ne connaissent pas, JAM est un acronyme qui signifie JavaScript, API et Markup. En termes simples, cela fait référence à un site Web qui comprend principalement du HTML et utilise JavaScript pour faire bouger les choses.

Gatsby permet aux développeurs de commerce électronique de construire des sites plus rapidement, de les lancer sans aucun problème et de réduire le nombre de failles de sécurité. Cela permet aux entreprises de commerce électronique d'utiliser n'importe quelle API de leur choix pour améliorer l'expérience d'achat du client.

De plus, la plate-forme a rapidement augmenté sa part de marché et, au cours des deux dernières années, elle a pratiquement doublé le nombre de sites Web qu'elle prend en charge. Plus de 228 000 sites Web utilisent actuellement Gatsby, y compris le géant de l'industrie Ubisoft.

Qu'est-ce que le cadre Gatsby ?

Gatsby est un générateur de site statique gratuit et open-source qui a été développé sur Node.js avec l'aide de React et GraphQL. Il contient plus de 2500 plugins que l'on peut utiliser pour générer des sites Web statiques basés sur des sources telles que des documents Markdown, MDX (Markdown avec JSX), des images et une grande variété de systèmes de gestion de contenu, notamment WordPress, Drupal et autres.

C'est un autre générateur de site statique, comme Hugo, Jekyll, etc.

On peut utiliser Gatsby pour créer des sites Web statiques qui agissent comme des applications Web progressives, en adhérant aux normes Web les plus récentes.

Caractéristiques importantes de Gatsby

  1. Gatsby utilise GraphQL pour obtenir des données de n'importe où, comme différentes bases de données, sites WordPress, etc.
  2. Gatsby utilise React JS pour les modèles de site et CSS pour le style du site.
  3. Gatsby possède également une architecture de plug-in qui facilite l'utilisation en permettant aux plug-ins de fonctionner avec JavaScript.

Qu'est-ce qu'un site Web statique ?

Contrairement aux sites Web dynamiques traditionnels, qui restituent la page Web au moment de la demande, un site Web statique utilise un rendu côté serveur pour fournir des fichiers HTML, CSS et JavaScript prédéfinis à un navigateur Web.

Si vous utilisez un site statique, vous pouvez séparer votre référentiel de contenu de votre interface frontale, ce qui vous donne plus de contrôle sur la façon dont vous présentez votre contenu. Un site statique est attrayant pour les entreprises pour des raisons financières, car les fichiers statiques sont petits, rapides et bon marché à servir.

Les sites Web statiques sont devenus de plus en plus courants ces dernières années. Cette augmentation est due à deux facteurs principaux : des outils de développement améliorés (langages et bibliothèques) et un besoin croissant des entreprises de maximiser les performances du site Web au-delà des contraintes d'un site basé sur une base de données.

Les sites de CV, les sites de portfolio, les pages de destination uniques et les blogs pédagogiques sont tous des exemples de sites Web statiques. Ces sites se composent généralement de quelques pages seulement et n'ont pas besoin de mises à jour régulières ou de contenu personnalisé.

Qu'est-ce qu'un générateur de site statique

Les générateurs de sites statiques sont des outils qui prennent des données brutes et une collection de modèles et génèrent un site Web HTML statique entièrement fonctionnel. La fonction fondamentale d'un générateur de site statique est d'automatiser la création de pages HTML individuelles et de préparer ces pages à l'avance afin de les servir à l'utilisateur. Ces pages HTML sont pré-construites afin qu'elles se chargent rapidement dans le navigateur de l'utilisateur.

Le plus souvent, les générateurs de sites statiques font partie de l'approche de développement Web JAMstack.

Avantages de l'utilisation du site statique

Outre l'automatisation du travail, un générateur de site statique offre les avantages suivants :

Efficacité accrue

Les sites Web statiques peuvent économiser du temps et de l'énergie en créant des pages en cache qui n'expirent jamais. De plus, on peut réduire ces fichiers avant le déploiement pour fournir la charge la plus légère possible, et on peut accomplir le déploiement via des CDN rapidement et sans trop d'effort.

La flexibilité

Comme la plupart des CMS sont liés à une base de données avec des champs prédéfinis, ils limitent votre flexibilité. Si vous souhaitez ajouter un widget Twitter à certains sites, vous aurez généralement besoin d'un plugin, d'un shortcode ou d'une fonctionnalité sur mesure.

Si vous travaillez avec un site statique, vous pouvez déposer le code du widget directement dans un fichier ou utiliser un extrait.

Très fiable

Un site Web statique nécessite moins de ressources pour fonctionner. Pour traiter trop de demandes, tout ce que le serveur a à faire est de renvoyer des fichiers plats, ce qui facilite l'ajustement aux charges de trafic fluctuantes. Bien qu'un serveur Web puisse toujours être mis à genoux ou que les API soient surchargées, il faudra beaucoup plus de requêtes parallèles pour y parvenir.

Meilleure sécurité

Les générateurs de sites statiques permettent aux développeurs d'utiliser un système de gestion de contenu sans tête en dissociant le front-end du back-end. Comme il y a moins de ports d'entrée potentiels, les sites Web statiques sont plus sûrs.

Contrôle de version et tests

Les données de la base de données sont volatiles. Un CMS permet aux utilisateurs d'ajouter, de supprimer ou de modifier le contenu quand ils le souhaitent. L'intégralité du site Web peut être supprimée en quelques clics de souris. Bien que vous puissiez sauvegarder votre base de données, vous pouvez toujours perdre certaines données, même si vous le faites régulièrement.

La plupart du temps, un site statique est plus sûr. On peut enregistrer le contenu dans :

Fichiers plats : cela facilite le contrôle des versions à l'aide de Git. Le contenu original est enregistré et toutes les modifications apportées peuvent être annulées instantanément.

Bases de données privées : les données ne sont pas nécessaires tant que le site n'est pas créé, elles n'ont donc pas besoin d'être sur un serveur public.

Comme le site peut être généré et prévisualisé n'importe où, même sur l'ordinateur personnel de l'utilisateur, les tests sont également simplifiés.

Avec un peu plus de travail, vous pouvez configurer des systèmes de déploiement qui vous permettent de créer le site à distance et de mettre à jour le serveur en direct chaque fois qu'un nouveau contenu est poussé vers un référentiel, révisé et approuvé.

Qu'est-ce que Jamstack ?

L'expression « JamStack » fait référence à une architecture de développement Web moderne pour la création de sites Web qui inclut JavaScript, des interfaces de programmation d'applications (API) et du balisage (JAM). Jamstack n'est pas une technologie ou un framework en soi, mais plutôt une architecture alternative sur laquelle on construit des applications et des sites Web.

Au lieu d'utiliser un système de gestion de contenu (CMS) typique, un site Jamstack sépare l'infrastructure (API), le code (JavaScript) et le contenu (Markup). Une architecture découplée les gérera séparément côté serveur et côté client. Les sites Web et les applications créés avec Jamstack déchargent autant de travail que possible du serveur sur l'appareil de l'utilisateur. Cela réduit considérablement le nombre de requêtes envoyées à un serveur, réduisant ainsi le temps passé à attendre une réponse du serveur.

Mathias Biilmann, le co-fondateur de Netlify, a inventé le terme JamStack.

L'écosystème Gatsby

Gatsby offre un certain nombre d'options pour créer un site Web. On peut l'adapter pour répondre aux besoins individuels et offrir des options prédéfinies pour ceux qui débutent, ce qui le rend très flexible.

Gatsby propose trois méthodes de développement : plugins, thèmes et starters.

Plugins

Les packages Node.js intègrent sans effort les fonctionnalités de site fondamentales de Gatsby. Les plugins typiques incluent les plateformes d'analyse, le contenu réactif et les améliorations d'optimisation des moteurs de recherche.

Thèmes

Pour les sites Gatsby, un thème Gatsby est un plug-in qui inclut un fichier gatsby-config.js qui fournit des fonctionnalités préconfigurées supplémentaires, une source de données et un code d'interface utilisateur. Étant donné que les thèmes sont essentiellement des plugins, ils peuvent être distribués et installés via un registre comme npm ou yarn, et leurs versions peuvent être tenues à jour via le fichier package.json du site Web.

Entrées

Un démarreur est un passe-partout, un site Web générique de Gatsby que l'on peut utiliser comme base pour un développement ultérieur. Une fois que quelqu'un change le démarreur, il n'a plus aucun lien avec sa source d'origine.

Les démarreurs officiels de Gatsby incluent un site par défaut, un site de blog, un site minimal "hello world" et la possibilité d'utiliser et de créer des thèmes. Il existe également plusieurs démarreurs créés par la communauté qui sont disponibles.

Le terme « maillage de contenu » décrit le lien entre les trois éléments principaux de Gatsby. Les éléments primaires sont

  1. Services CMS : Contentful, WordPress et Shopify en sont quelques exemples. En tant que plate-forme de développement de contenu, les services CMS peuvent servir de référentiel central pour la gestion des données.
  • Infrastructures pour le développement : Gatsby utilise les frameworks de développement contemporains React et GraphQL.
  • Outils de déploiement : Gatsby produit les fichiers statiques pour le déploiement et les intègre à Netflify, Vercel ou AWS Amplify.

Gatsby prélève les ressources d'un système de gestion de contenu ou de fichiers de démarquage et les place dans leurs dossiers respectifs.

Il existe des milliers de plugins disponibles pour l'écosystème Gatsby, y compris ceux pour des choses comme l'intégration des réseaux sociaux, le commerce électronique, l'analyse, l'optimisation des images et le chargement paresseux.

Approfondissons React, GraphQL et Webpack, trois des principaux éléments de base de Gatsby.

Réagir

React (alias React.js/ReactJS) est une bibliothèque JavaScript frontale gratuite et open-source permettant de créer des interfaces utilisateur avec des composants d'interface utilisateur. Meta, à l'origine Facebook, le gère en collaboration avec une communauté de développeurs individuels et d'entreprises. Les applications à page unique, mobiles et rendues par le serveur peuvent toutes être construites sur la base puissante de React en utilisant des frameworks populaires comme Next.js.

GraphQL

GraphQL est un langage de requête et une technologie d'exécution côté serveur largement utilisée pour les interfaces de programmation d'applications afin de garantir que le client reçoit toutes les données nécessaires.

Facebook l'a développé en 2012 lors de la création de l'application Facebook, et il sert actuellement à de nombreuses autres fins.

Dans l'ensemble, GraphQL vise à renforcer le développement d'API et à réduire au minimum les problèmes de sécurité des API en fournissant un langage de requête qui donne aux développeurs d'API une liberté totale pour jouer librement et façonner les API comme bon leur semble.

Webpack

Webpack est un bundler gratuit et open source pour les modules JavaScript. Bien qu'il ait été conçu avec JavaScript à l'esprit, il peut également être utilisé pour modifier d'autres actifs frontaux, notamment HTML, CSS et images, si les chargeurs appropriés sont présents. Pour créer des actifs statiques, Webpack utilise des modules avec des dépendances.

Webpack produit un graphique de dépendance à partir des dépendances, permettant aux développeurs Web d'employer une approche modulaire lors de la création d'applications Web.

La fonction de fractionnement de code de Webpack permet aux utilisateurs de générer du code selon leurs besoins.

Pour résumer, voici comment Gatsby fonctionne :

  • Gatsby obtient ses données à l'aide d'une API GraphQL.
  • Ensuite, webpack est responsable de la création des bundles et du fractionnement du code.
  • Enfin, les pages HTML, CSS et React pré-rendues sont déployées sur un serveur.

QUE POUVEZ-VOUS CONSTRUIRE AVEC GATSBY ?

La décision d'utiliser Gatsby dépend du type d'application que vous avez l'intention de créer. Avec Gatsby, vous pouvez créer :

  • PWA (applications Web progressives)
  • Sites Web JamStack
  • Sites de commerce électronique statiques
  • Sites de commerce électronique sans tête
  • Page commerciale numérique ultra-rapide

Études de cas Gatsby

1. Visite à domicile Pro

Housecall Pro s'adresse à une variété d'industries de services à domicile.

La vitesse du site, l'évolutivité, le référencement et, surtout, la possibilité de publier de nouvelles pages sans l'implication des développeurs étaient leurs priorités, ils sont donc passés à Gatsby et ils n'ont pas été déçus.

  • Gatsby a permis à son site d'être exploré instantanément par les moteurs de recherche car il produit toutes les pages sous forme de fichiers HTML statiques.
  • Depuis le moment où ils ont mis en place Gatsby fin novembre 2018 jusqu'en avril 2019, le trafic organique du blog a bondi de 973 %.
  • De fin novembre 2018 à avril 2019, la fréquence d'apparition du site Web marketing sur la première page des résultats de recherche Google pour une variété de mots clés a augmenté de 56 %.

2. Grille d'envoi

SendGrid est une plateforme de communication client qui stimule l'engagement et la croissance.

Après avoir migré vers Gatsby,

  • le centre de connaissances SendGrid a réduit de moitié ses temps de chargement des pages.
  • Le nouveau site Gatsby s'est initialement chargé 20 % plus rapidement et les transitions entre les pages ont été 100 % plus rapides.

3. Gymnases YouFit.

YouFit Gyms est une chaîne nationale de clubs de fitness.

Depuis qu'ils ont relancé leur site Web avec Gatsby, ils ont constaté ce qui suit :

  • Augmentation de 22% du trafic organique
  • Baisse immédiate de 10 % du taux de rebond
  • Le taux de conversion des prospects a augmenté de 60 % à mesure que de plus en plus de personnes se sont inscrites pour un essai gratuit.

4. Prêts auto Canada

Car Loans Canada aide à mettre en relation les acheteurs potentiels de voitures avec des prêts automobiles et des concessionnaires automobiles partout au Canada.

Comment ils ont profité de Gatsby

  • Augmentation du nombre de pages vues par session
  • Le temps moyen qu'un utilisateur passe sur le site a augmenté de plus de 100 %.

Conclusion

Maintenant, vous avez probablement une idée complète des avantages qu'offre Gatsby. Il s'agit sans aucun doute d'une technologie de pointe qui offre une pléthore de raisons convaincantes aux spécialistes du marketing, aux hommes d'affaires, aux entreprises et aux magasins de l'utiliser.

En conclusion, nous pouvons affirmer que si vous commencez à l'apprendre pour faire avancer votre carrière ou élargir vos connaissances, alors Gatsby ne vous décevra pas.