Image for Gatsby – generator stron statycznych

Gatsby – generator stron statycznych

Czas czytania:

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ą:
    npm install -g gatsby-cli
    Teraz możemy już utworzyć stronę internetową:
    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:
    cd site-demo
    będąc w katalogu naszej aplikacji możemy uruchomić serwer lokalny:
    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.
    zapraszamy do kontaktu

    UI2WEB.com jest firmą technologiczną skupioną wokół rozwiązań WordPress / WooCommerce /PHP/ HTML5. Oferujemy zarówno usługi wdrożeniowe jak również body leasing programistów front-end oraz back-end.

    Jeśli trafiłeś tu poszukując odpowiedzi na istniejące problemy i masz dość współpracy z freelancerami a stawiasz na bezkompromisową jakość.

    Zapraszamy do kontaktu

    Może Cię również zainteresować:

    Czy warto decydować się na usługę wdrożenia WooCommerce i na czym ona polega?

    Wtyczka do WordPressa WooCommerce wydaje się być prostym sposobem na stworzenie sklepu internetowego. Wystarczy instalacja,… Read More

    Min(), max(). clamp() – nowe funkcje w css

    Używanie relatywnych jednostek długości do budowania responsywnych layoutów może być problematyczne. Elementy, których rozmiar uzależniony… Read More