Tworzenie stron internetowych w oparciu o framework Gatsby.js?

TWORZENIE STRON INTERNETOWYCH W GATSBY

Gatsby to framework wykorzystujący bibliotekę React, w którym tworzenie stron internetowych jest wyjątkowo przyjemne, z dużym naciskiem na wsparcie prac programistycznych. W tym artykule dowiesz się o zaletach i wadach wykorzystania Gatsby.js w swoim projekcie, oraz o tym, o czym musisz pomyśleć przed jego wdrożeniem.

WYKORZYSTAJ GATSBY JS DO TWORZENIA STRON INTERNETOWYCH

GATSBY.JS - CO TO JEST?

Gatsby to framework, który pozwala budować superszybkie strony i aplikacje webowe w oparciu o React JS. Pozwala w łatwy sposób zoptymalizować kod strony. Cechą szczególną Gatsby jest to, że łączy w sobie zalety wielu innych rozwiązań:

szybkość działania stron zbudowanych w oparciu o generator stron statycznych,
dynamiczne elementy aplikacji tworzonych przy użyciu biblioteki React.js,
wygodne i zoptymalizowane prekonfigurowane środowisko programistyczne,
możliwość zarządzania treścią na poziomie popularnych systemów CMS (np. WordPress czy Drupal).

DLACZEGO WARTO STWORZYĆ STRONĘ INTERNETOWĄ OPARTĄ NA GATSBY?

SZYBKOŚĆ I WYDAJNOŚĆ

Tworzenie stron internetowych z pomocą Gatsby to gwarancja szybkości i wydajności. Twórcy frameworka włożyli dużo pracy nad zoptymalizowaniem szybkości tworzonych za jego pomocą stron. Dzięki zbudowaniu statycznych plików strony, będzie się ona ładować bardzo szybko. Podczas ładowania strony po stronie serwera nie wykonują się żadne skrypty, ani zapytania do bazy danych. Wszystko, co serwer musi zrobić, to zwrócić statyczne pliki HTML, CSS i JavaScript.

Po wczytaniu podstawowej struktury strony, treści i stylów uruchamia się kod JavaScript, który następnie wczytuje aplikację React i wstępnie załadowuje część danych dla pozostałych podstron. Dzięki temu przejście na inne podstrony nie wymaga pełnego przeładowania strony. Pobiera tylko zawartość określonej strony i automatycznie zastępuje zmienione części. Dodatkowo, gdy pobrane dane buforują się w przeglądarce, powrót do odwiedzanej przez nas podstrony nie wymaga wysyłania zapytania do serwera i strona ładuje się szybciej.

DOSTĘP DO DANYCH I WTYCZEK

Gatsby umożliwia jednoczesne pobieranie danych z wielu źródeł. Na przykład treść na bloga można przygotować za pomocą WordPressa, a sklep prowadzić za pomocą Shopify. Funkcje te można połączyć ze spójnym i ujednoliconym interfejsem użytkownika opartym na Gatsby. Ponadto każdy zespół lub twórca treści w danej witrynie może korzystać z preferowanego przez siebie narzędzia. Przykładowo, jeśli treść jakiejś podstrony przygotowuje się w Google Docs, a następnie ręcznie wkleja do systemu CMS, to Gatsby, automatycznie wgra ją bezpośrednio na stronę www, pobierając dane z systemu CMS. Ponadto istnieje bogata biblioteka gotowych elementów i wtyczek, dzięki którym można znacznie przyspieszyć proces tworzenia strony internetowej. Znajdziesz tam m.in.:

wtyczki, które obsługują osadzone obrazy, ich responsywność, zoptymalizowanie i opóźnione ładowanie,
wtyczki dodają możliwość pobierania danych z różnych źródeł takich jak Wordpress, Drupal, ale także nieoznaczonych plików czy dokumentów Google Docs,
wstępnie skonfigurowane szablony dla blogów, dokumentów czy np. platform kursów wideo,
pełna gama wtyczek do różnych aspektów SEO.

BEZPIECZEŃSTWO

Gatsby przygotowuje strony internetowe tak, aby były bezpieczne i odporne na ataki z zewnątrz. Strony internetowe oparte na tradycyjnych systemach CMS mają dużo słabszy poziom bezpieczeństwa. Konstruując statyczny zasób strony, żaden kod nie jest wykonywany, gdy użytkownik ładuje go po stronie serwera. Ponadto system, na którym przygotowywana jest treść (np. Drupal) można skonfigurować w sieci lokalnej, za firewallem, a na zewnątrz widoczna jest tylko wersja kompilacji strony. W rezultacie nie będzie dostępu z zewnątrz nawet do tabeli połączeń CMS, co skutecznie zmniejsza liczbę potencjalnych luk w zabezpieczeniach do zera.

INDEKSOWANIE W WYSZUKIWARKACH

Gatsby budując stronę internetową zapewnia jej również pełne indeksowanie w wyszukiwarkach. Zawartość wszystkich podstron w procesie budowania są renderowane do statycznych plików HTML. Gdy użytkownik ładuje stronę, najpierw otrzymuje kod HTML i CSS, a następnie załadowaną aplikacja React. Dzięki temu podczas indeksowania roboty wyszukiwarek mogą czytać i indeksować całą zawartość strony czytając tylko kod HTML.

UDOGODNIENIA DLA DEWELOPERÓW PRZY TWORZENIU STRON INTERNETOWYCH

Gatsby zapewnia wygodne środowisko programistyczne. Lokalnie stworzoną wersję strony internetowej uruchamiamy jednym poleceniem. Wszystkie zmiany w kodzie są automatycznie widoczne na monitorze w czasie rzeczywistym. Środowisko jest skonfigurowane tak, aby można było korzystać z najnowszych technologii, które w razie potrzeby zostaną skompilowane do wersji obsługujących starsze przeglądarki (nawet IE9). Interfejs API GraphQL w wygodny sposób pobiera dane i wyświetla je na ekranie. Wszystko to sprawia, że tworzenie stron internetowych dla programistów jest łatwiejsze i szybsze niż w przypadku tradycyjnych systemów CMS. Gdzie często po wprowadzeniu zmian w kodzie trzeba przebudować styl, wyczyścić pamięć podręczną i odświeżyć otwartą stronę w przeglądarce. Podczas pracy z Gatsby wszystko dzieje się automatycznie i zajmuje kilka sekund.

HOSTING

Hosting stron internetowych opartych na Gatsby jest łatwy i tani. Przebudowa strony wygeneruje statyczne pliki HTML, CSS i JS i tylko one zostaną udostępnione użytkownikowi. W rezultacie możesz korzystać z prawie każdego dostawcy hostingu, ponieważ żaden kod nie wykonuje się na serwerze, nie będzie potrzebna żadna konkretna wersja PHP ani konkretna biblioteka. Kupując hosting strony internetowej, nie musisz płacić za moc obliczeniową procesora ani dostępną pamięć RAM. Nasza strona internetowa będzie wykorzystywać tylko niewielką ilość miejsca na dysku i przesyłać dane. Istnieją również dostawcy usług, którzy oferują hosting tych statycznych plików stron za darmo. Co więcej, możesz w pełni korzystać z usług CDN, ponieważ możesz ich używać do obsługi prawie każdej witryny.

CO NALEŻY WZIĄĆ POD UWAGĘ ZA NIM ZDECYDUJESZ SIĘ NA TWORZENIE STRON INTERNETOWYCH OPARTYCH NA GATSBY JS?

Wprowadzenie zmian w treści wymaga przebudowy strony tak, aby były widoczne dla użytkowników. W przypadku większych stron z dużą ilością treści może to chwilę potrwać. Trwają jednak prace nad stopniową przebudową frameworku, który znacznie przyspieszy ten proces, przebudowując tylko te podstrony, które faktycznie uległy zmianie. Ponadto redaktorzy treści są często przyzwyczajeni do tego, że jak tylko klikniesz "Opublikuj", nowa treść lub zmiany jest od razu widoczna dla użytkownika. Korzystając z Gatsby, musisz najpierw przebudować witrynę. Tak więc, zanim zaczniesz pracować z frameworkiem Gatsby, upewnij się, że ci, którzy będą później importować i edytować zawartość, wiedzą o tym dodatkowym kroku, który należy wykonać, zanim jakiekolwiek zmiany zostaną upublicznione.

Domyślnie nie można wyświetlić podglądu zmian wprowadzonych przed opublikowaniem. Aby zmiany były widoczne, cała strona musi zostać przebudowana, więc nie można kliknąć przycisku podglądu przed zapisaniem zmian i sprawdzeniem, czy nowa treść jest poprawna poza edytorem treści. Taka dogodność jest dostępna tylko w trybie deweloperskim. Prace nad rozwiązywaniem tych problemów są w toku, a pierwsze wyniki są gotowe w postaci Gatsby Preview na serwerach Gatsby Cloud.