Co to jest Gatsby JS

Gatsby.js jest frameworkiem webowym, który działa w oparciu o React oraz GraphQL.

Nazywany jest generatorem stron statycznych, ponieważ tworzy statyczne pliki HTML, CSS oraz JS. Zostają one zwracane przez serwer w trakcie ładowania strony, bez działania dodatkowych zapytań oraz skryptów. Istnieje również możliwość generowania stron z dynamicznie zmieniająca się treścią. Pozwala to na pobieranie danych w czasie rzeczywistym z serwera.

Dzięki tym zaletom, firmy takie jak IBM, Spotify, Braun czy nawet CIA zdecydowały się na zbudowanie swoich stron internetowych w oparciu o Gatsby.

Szybkość, wydajność i optymalizacja

Ładowanie strony ze względu na statyczne pliki przebiega bardzo szybko, ponieważ nie jest ona renderowana po stronie użytkownika w przeglądarce. Treść strony jest tworzona w trakcie kompilacji projektu przeprowadzanego przez twórców danego produktu, w tym momencie są również pobierane najnowsze dane.

Początkowo ładowane są tylko bazowe elementy, które gwarantują prawidłowe wyświetlanie się strony w przeglądarce. Dopiero po wykonaniu interakcji zostają doładowywane treści dla pozostałych podstron.

Przekłada się to na płynne przemieszczanie na stronie, dzięki braku konieczności pobierania jej w całości z serwera.

Problem ładowania zdjęć został rozwiązany przez dedykowaną bibliotekę gatsby-image, dzięki czemu generowany jest obraz o najmniejszej możliwej wadze pasującej do urządzenia.

Wyeliminowany został także problem skaczącej treści na stronie - duże obrazy początkowo przybierają postać placeholderów aby zapewnić prawidłowy układ na stronie.

Aby cały proces budowania strony przebiegał jeszcze sprawniej, możliwe jest użycie dedykowanego narzędzia - Gatsby Cloud (więcej o nim można przeczytać w artykule - https://pleodigital.com/blog/g...)

Pobieranie danych z kilku źródeł w tym samym momencie

Dane, które chcemy wyświetlać na stronie mogą pochodzić z dowolnych źródeł takich jak Headless CMS, Markdown czy zapytania API. W Gatsby możemy je wyświetlać jednocześnie.
Niewątpliwym plusem jest możliwość korzystania z technologii GraphQL, który pozwala na pobieranie tylko takich danych których potrzebujemy, co przekłada się na wydajność produktu.
Istnieje również możliwość pobierania danych dynamicznie w trakcie wyświetlania strony np. za pomocą Axiosa.

SEO

Renderowanie statycznych plików HTML pozwala robotom na zapoznanie się z całą treścią strony co przekłada się na pełne indeksowanie przez wyszukiwarki.

Ponad 2500 pluginów

Framework ten posiada obszerny zbiór dedykowanych pluginów, które zapewniają wydajność na wysokim poziomie oraz znacznie przyspieszają implementacje rozwiązań.

Integracje z CMS

Twórcy zadbali o integrację z wieloma CMSami, w tym również w sporej części headlessowymi, wśród nich znajdziemy między innymi takie produkty jak: Contentful, DatoCMS, Strapi, czy CraftCMS.

Pełna lista do zobaczenia pod adresem:
https://www.gatsbyjs.com/docs/...