Gatsby JS - dlaczego warto stworzyć stronę w oparciu o ten framework?

Gatsby.js - co to jest?

Gatsby to framework pozwalający na budowanie błyskawicznie działających stron i aplikacji internetowych opartych o React JS. Pozwala on w prosty sposób zoptymalizować kod strony www.

Unikalność Gatsby polega na tym, że łączy on zalety wielu innych rozwiązań:

• szybkość działania witryn przygotowanych w oparciu o statyczne generatory stron (np. Hugo czy Jekyl),
• dynamiczne elementy aplikacji tworzonych z wykorzystaniem frameworków JS (np. React, Vue),
• wygodne, optymalnie prekonfigurowane środowisko developerskie (np. Create React App, Next.js, Vue CLI),
• możliwość zarządzania treściami z poziomu popularnych systemów CMS (np. WordPress czy Drupal).

Dlaczego warto stworzyć stronę w oparciu o Gatsby?

Szybkość i wydajność

Tworzenie strony internetowej przy użyciu Gatsby zapewnia szybkość i wydajność. Twórcy frameworka włożyli dużo pracy w optymalizację szybkości działania stron tworzonych przy jego pomocy. Dzięki zbudowaniu statycznych plików strony, jej wczytywanie będzie bardzo szybkie. W trakcie ładowania strony nie są wykonywane po stronie serwera żadne skrypty czy zapytania do bazy danych. Wszystko, co musi zrobić serwer, to tylko zwrócenie statycznych plików HTML, CSS i JS.

Po wczytaniu podstawowej struktury, treści i stylów strony doczytywany jest JavaScript, który uruchamia aplikację React i wstępnie ładuje część danych dotyczących pozostałych podstron. Dzięki temu przejście na inną podstronę nie wymaga przeładowania całej strony. Pobierze tylko treści danej podstrony i dynamicznie podmieni te części, które się zmieniły. Dodatkowo raz pobrane dane są zapisywane w pamięci podręcznej przeglądarki, dzięki czemu powrót na podstronę, na której już byliśmy, nie będzie wymagał wysyłania zapytań do serwera i strona wczyta się jeszcze szybciej.

Dostęp do danych i wtyczek

Gatsby umożliwia pobieranie danych z wielu źródeł naraz. Na przykład treści na bloga można przygotowywać, korzystając z WordPressa, a sklep obsługiwać korzystając z Magento i spiąć te funkcjonalności spójnym, jednolitym front-endem opartym na Gatsby. Dodatkowo każdy zespół albo osoba tworząca treści na danej witrynie może korzystać z preferowanego narzędzia. Więc jeśli np. treści części podstron były przez kogoś przygotowywane w Google Docs i później ręcznie przeklejane do systemu CMS, to z Gatsby można je automatycznie pobierać bezpośrednio na stronę, a resztę treści nadal przygotowywać w CMS.

Ponadto, istnieje bogata biblioteka wtyczek i gotowych elementów, z których pomocą można znacznie przyspieszyć proces tworzenia strony. Można w niej znaleźć m.in.:

• wtyczki obsługujące wstawiane obrazki tak, aby każdy był w pełni responsywny, zoptymalizowany i progresywnie się wczytywał,
• wtyczki dodające możliwość pobierania danych z różnych źródeł takich jak Wordpress, Drupal, ale też pliki mark-down albo dokumenty Google Docs,
• wstępnie skonfigurowane szablony bloga, dokumentacji czy np. platformy z kursami wideo,
• pełno wtyczek obsługujących różne aspekty SEO.

Bezpieczeństwo

Internetowe strony www przygotowane z wykorzystaniem Gatsby są bezpieczniejsze niż oparte o tradycyjne systemy CMS. Dzięki budowaniu statycznych zasobów strony, podczas jej wczytywania przez użytkownika po stronie serwera nie jest wykonywany żaden kod. Dodatkowo system, w którym przygotowywane są treści (np. Drupal) można postawić w lokalnej sieci, za firewallem i na zewnątrz wystawiać tylko zbudowaną wersję strony. Dzięki temu z zewnątrz w ogóle nie będzie dostępu nawet do panelu logowania systemu CMS, co praktycznie zmniejsza do zera ilość miejsc, w których mogą się znaleźć potencjalne luki bezpieczeństwa.

Indeksowanie przez wyszukiwarki

Stworzenie strony korzystając z Gatsby, zapewnia też pełne indeksowanie w wyszukiwarkach, mimo oparcia całej witryny o ReactJS. Podczas procesu budowania wszystkie podstrony i ich treści są renderowane do statycznych plików HTML i 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 czytając tylko HTML, a nie jak w przypadku tradycyjnych aplikacji React dostają pustą stronę, która treściami jest wypełniania dopiero po załadowaniu aplikacji JavaScript.

Udogodnienia dla developerów

Gatsby zapewnia wygodne środowisko developerskie. Lokalną developerską wersję strony można uruchomić jedną komendą, a wszystkie wprowadzane zmiany w kodzie są automatycznie, w czasie rzeczywistym na niej odzwierciedlane. Środowisko jest skonfigurowane tak, aby można było korzystać z najnowszych technologi, które w razie potrzeby zostaną skompilowane do wersji wspierających starsze przeglądarki (nawet IE9). Pobieranie danych do wyświetlenia odbywa się poprzez wygodne API GraphQL. To wszystko sprawia, że programistom tworzącym stronę pracuje się wygodnie i szybciej niż przy tradycyjnych systemach CMS, w których często po wprowadzeniu zmian w kodzie trzeba przebudować style, wyczyścić cache i odświeżyć stronę otwartą w przeglądarce. Podczas pracy z Gatsby to wszytko dzieje się automatycznie i zajmuje sekundy.

Hosting

Hostowanie stron opartych o Gatsby jest proste i tanie. Rezultatem przebudowania strony są statyczne pliki HTML, CSS, JS i tylko one muszą być serwowane użytkownikom. Dzięki temu można wykorzystać praktycznie dowolnego dostawcę usług hostingowych, ponieważ na serwerze nie będzie uruchamiany żaden kod, nie jest wymagana żadna konkretna wersja PHP, czy konkretne biblioteki. Wykupując hosting strony internetowej, nie trzeba płacić za moc obliczeniową procesora czy dostępną pamięć RAM. Nasza strona będzie wykorzystywała tylko trochę miejsca na dysku i transferu danych. Istnieją też usługodawcy oferujący hosting takich statycznych plików strony za darmo. Dodatkowo można w pełni wykorzystać zalety serwisów CDN, bo można przez nie serwować praktycznie całą stronę.

Co trzeba rozważyć przed wybraniem Gatsby?

Wprowadzenie zmian w treści wymaga przebudowania strony, aby były one widoczne dla użytkowników. Przy większych stronach z dużą ilością treści, może to zająć dłuższą chwilę. Trwają jednak prace nad przyrostowymi przebudowaniami strony, które pozwolą znacznie przyspieszyć ten proces, przebudowując tylko te podstrony, które się faktycznie zmieniły. Oprócz tego redaktorzy treści najczęściej są przyzwyczajeni, że w momencie kliknięcia 'Publikuj' nowe treści albo zmiany staną się od razu widoczne dla użytkowników. Korzystając z Gatsby, będzie trzeba najpierw przebudować stronę. Przed rozpoczęciem prac nad stroną opartą o Gatsby należy się więc upewnić, że osoby, które będą później wprowadzały i edytowały treści, zdają sobie sprawę z tego dodatkowego kroku, który musi się wykonać, zanim wprowadzone zmiany staną się publiczne.

Domyślnie nie da się podejrzeć wprowadzonych zmian przed publikacją. Aby zmiany były widoczne, trzeba przebudować całą stronę, przez co nie ma możliwości kliknięcia przycisku podglądu przed zapisaniem zmian i sprawdzenia, czy nowe treści poprawnie wyglądają poza edytorem treści. Nad rozwiązaniem tego problemu trwają już prace i pierwsze efekty są gotowe w postaci Gatsby Preview, usługi (na razie dostępnej tylko na gatsby.com, bez wersji do samodzielnego hostowania) pozwalającej na podejrzenie wprowadzanych zmian przed ich publikacją.

Framework Gatsby - podsumowanie

Gatsby pozwala tworzyć szybkie, zoptymalizowane pod SEO, interaktywne strony i aplikacje. Można go wykorzystać do stworzenia praktycznie każdego typu serwisu na back-endzie korzystając ze sprawdzonych rozwiązań i systemów, do których jesteśmy przyzwyczajeni. Trzeba mieć tylko na uwadze drobne zmiany w procesie publikacji i aktualizacji zawartości na tworzonych witrynach.