TechBlog - wszystkie artykuły

Gatsby - generator stron statycznych

Co to jest Gatsby.js?

Jednym zdaniem, Gatsby to statyczny generator witryn, który wykorzystuje technologię React.js i GraphQL. Jest to darmowa platforma open source, dzięki której tworzone są niesamowicie szybkie strony internetowe, zgodne z najnowszymi standardami sieciowymi i zoptymalizowane pod kątem wysokiej wydajności. 

Zalety Gatsby.js

Do zalet generatora stron statycznych należą:
  • szybkość i wydajność - framework Gatsby po wczytaniu podstawowej struktury strony przewiduje, co prawdopodobnie będzie potrzebne w następnej kolejności, a następnie zaczyna pobierać i wstępnie ładować tę zawartość w tle, zanim jeszcze zażąda jej przeglądarka - co oznacza, że ​​życzenie użytkownika zostanie spełnione niemal natychmiast. Jest to możliwej dzięki wstępnemu obliczaniu całego stanu - w tym przypadku zasobów i dynamicznej zawartości lub danych
  • przyjazne SEO - aplikacje budowane na React wypełniane są treściami dopiero gdy załadują kod JavaScript. W przypadku Gatsby, w momencie wczytania strony przez użytkownika najpierw zwracany jest HTML i CSS, a dopiero później jest ładowana aplikacja React. Dzięki temu podczas indeksowania roboty wyszukiwarek mogą odczytać i zaindeksować całą treść strony.
  • integracja z CMS - wiele systemów zarządzania treścią (CMS) obsługuje teraz tryb „headless”, który jest idealny dla witryn Gatsby. Umożliwia to pobieranie danych z oprogramowania CMS i używania ich w Gatsby. 
  • hosting - hosting stron stworzonych przy wykorzystaniu Gatsby.js jest tańszy i prostszy, ponieważ nie ma dużych wymagań dotyczących zasobów na serwerze, dzięki użyciu statycznych plików HTML, CSS i JS
  • wtyczki - framework posiada potężną bazę pluginów, w której znajdują się m.in. narzędzia umożliwiające wstawianie responsywnych i w pełni zoptymalizowanych obrazków lub narzędzia dające możliwość pobierania danych z różnych źródeł takich jak Wordpress, Drupal, ale też pliki mark-down i dokumenty Google Docs

Wady Gatsby.js

Do wad możemy zaliczyć: 
  • większy próg wejścia dla osób, które nigdy nie miały do czynienia z narzędziami JavaScript, React czy też GraphQL. 
  • rekomendowane dla stron statycznych - prowadzenie sklepu internetowego w oparciu o ten framework może być bardziej czasochłonne i uciążliwe. Należałoby za każdym razem wgrywać stronę na serwer po dokonaniu zmian w sklepie.

Progressive Web App

Konkretnie, strony internetowe można testować pod kątem następujących trzech podstawowych kryteriów, aby zakwalifikować s jako PWA:

  1. Protokół HTTPS
  2. Web App Manifest
  3. Service Worker w trybie offline

W bazie pluginów frameworka znajdziemy gatsby-plugin-offline, który umożliwi dodanie Service Worker oraz gatsby-plugin-manifest, który umożliwia obsługę manifestu. Gatsby możemy wykorzystać nie tylko do tworzenia statycznych witryn. Jest to również doskonałe narzędzie do budowania PWA ze wszystkimi rzeczami, które może zrobić nowoczesna aplikacja internetowa, w tym uwierzytelnianie, dynamiczne interakcje, pobieranie danych itp.

Jak zacząć? 

Gatsby oferuje dość przystępną dokumentację, która jest naprawdę pomocna na stracie.  Gatsby oferuje też potężne narzędzie CLI do szybszego tworzenia statycznych witryn. Instalujemy je komendą:  

Bash
Bash
Bash
Bash
Bash
Bash
Bash
Bash
Bash
npm install -g gatsby-cli

Teraz możemy już utworzyć stronę internetową: 

Bash
Bash
Bash
Bash
Bash
Bash
Bash
Bash
Bash
gatsby new site-demo

Po ukończeniu instalacji, powstanie w pełni działający szablon witryny, który wystarczy rozbudować i dostosować według własnych potrzeb. A struktura naszej aplikacji wygląda tak:


Aby można było edytować witrynę, trzeba wejść do utworzonego katalogu, w naszym przypadku “site-demo”, a więc użyjemy komendy: 

Bash
Bash
Bash
Bash
Bash
Bash
Bash
Bash
Bash
cd site-demo

będąc w katalogu naszej aplikacji możemy uruchomić serwer lokalny:

Bash
Bash
Bash
Bash
Bash
Bash
Bash
Bash
Bash
gatsby develop

Nasza witryna otworzy się pod adresem http://localhost:8000/


Podsumowanie

Gatsby.js może być niewątpliwie doskonałym rozwiązaniem jeśli planujesz prostą statyczną stronę WWW. Szeroka baza pluginów oraz możliwość zintegrowania tego frameworka z oprogramowaniem CMS umożliwiają również zbudowanie witryny JAM Stack, PWA, czy platformy E-commerce. Pluginy umożliwiają integrację z takimi usługami jak Shopify czy Snipcart. Gatsby.js ma również przewagę nad popularnymi systemami CMS w kwestii bezpieczeństwa i optymalizacji aplikacji. Nie jest wymagający co do hostingu, a strony budowane tą metodą lądują na pierwszych miejscach w wynikach Google.



Cookies Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje. Polityka prywatności