WordPress i Gatsby – Case study Headless WordPress

JavaScript to technologia, która w ostatnim czasie rozwija się niezwykle szybko. Mój pierwszy pracodawca często powtarzał „I tak wszyscy skończymy w JavaScript”. Wydawało mi się wtedy jednak, że to nie dla mnie. Na ostatnim WordCampie w Łodzi spotkałem Sebastiana Kurzynowskiego, który opowiadał o połączeniu WordPress i Gatsby. Argumenty miał mocne. Namówił mnie i… spróbowałem. Wybór padł na projekt strony internetowej dla mojej narzeczonej – czteryokrazenia.pl.

W tym wpisie znajdziesz:

• Moje wątpliwości dotyczące Gatsby
• Dlaczego wybrałem Gatsby dla strony czteryokrazenia.pl?
• Najważniejsze założenia projektu
  • Prostota w edycji
  • Optymalizacja SEO poprzez Yoast SEO
  • Dostosowanie witryny do wymogów Google Lighthouse oraz PWA
  • Możliwość uruchomienia Gatsby na swoim hostingu
  • Aktualizacja danych z WordPressa w Gatsbym
• Zalety i wady tworzenia strony na WordPressie za pomocą Gatsby
• Przy jakich stronach internetowych Gatsby sprawdzi się najlepiej?
• Podsumowanie

Moje wątpliwości dotyczące Gatsby

Rozdzielenie części wizualnej od WordPressa wzbudzało we mnie duże wątpliwości. Na moich stronach internetowych ilość wtyczek ograniczam zazwyczaj do minimum dopasowując określone funkcjonalności do potrzeb klienta. Rozumiem jednak klientów, którzy wolą załatwić niektóre funkcjonalności wtyczką (ze względu na przykład na ograniczony budżet). W przypadku użycia Gatsby w wielu przypadkach zabieram możliwość samodzielnego dodania na przykład formularza do zapisu do newslettera czy wdrożenia formularza kontaktowego.

Biłem się również z myślami – Do jakiego typu stron internetowych Gatsby nadaje się najlepiej? Przy większych stronach czas budowania aplikacji byłby moim zdaniem zbyt długi. Natomiast w przypadku małych stron – czy to nie byłoby jak wyciąganie bazooki do ustrzelenia muchy?

Zastanawiałem się ponadto jak wygląda połączenie Gatsby z Yoast SEO, czy Advanced Custom Fields PRO. Zależało mi na wykorzystaniu obu wtyczek w tym projekcie. Nie wyobrażałem sobie strony internetowej bez wsparcia SEO, bądź dodatkowych bloków do Gutenberga. Jak się później okazało, moje wątpliwości były przesadzone.

Dlaczego wybrałem Gatsby dla czteryokrazenia.pl?

• Strona internetowa dla mojej narzeczonej i przyjaciela – dotychczas wszystkie materiały z projektu trzymali na Facebooku, na stronie Eweliny i w jeszcze innych miejscach. Wspólnie doszliśmy do wniosku, że pomysł zebrania wszystkich materiałów w jednym miejscu jest świetnym pomysłem,
• Prostota projektu – strona czteryokrazenia.pl z założenia miała być prostą, małą stroną bez wielu funkcjonalności. Z tego względu zdecydowałem się na wykorzystanie akurat tej technologii w tym projekcie. Pomyślałem sobie – „Jak nie teraz to kiedy?”,
• Brak presji czasu– jeżeli projekt okazałby się niepowodzeniem bez problemu w każdej chwili mogłem się wycofać i przerzucić wszystko do nowego motywu do WordPressa,
• „Do portfolio” – nie ukrywam, że chciałem mieć stronę w Gatsbym by wzbogacić moje portfolio i uzupełnić repozytorium git które jest puste.

Najważniejsze założenia projektu

Na sam początek przedstawiłem Ewelinie i Mateuszowi główne założenia projektu. Nie mieli oni wygórowanych wymagań. Zależało im głównie na uporządkowaniu wszystkich treści z projektu. Wspólnie zadecydowaliśmy o tym, że najważniejszymi rzeczami są:

• Prostota w edycji
• Optymalizacja SEO poprzez Yoast SEO
• Dostosowanie witryny do wymogów Google Lighthouse oraz PWA
• Możliwość uruchomienia Gatsby na swoim hostingu
• Aktualizacja danych z WordPressa w Gatsbym

Prostota w edycji

W każdym projekcie najbardziej istotną kwestią jest dla mnie to, żeby mój klient nie miał problemów z obsługą strony internetowej. Chciałem umożliwić Ewelinie i Mateuszowi edycję witryny z poziomu Edytora Gutenberga. To dla nich tworzyłem stronę, a nie dla siebie. Ważne było dla mnie, by wykorzystać pełen potencjał Edytora Gutenberg i funkcjonalności dodatkowych bloków za pomocą Advanced Custom Fields PRO. Ewelina trochę obawiała się, że eksperyment z nowymi technologiami zabierze jej możliwość edycji kosztem wydajności. Udało się jednak bez problemu spełnić jej potrzeby i wykorzystaliśmy pełen potencjał bloków Gutenberga.

Optymalizacja SEO poprzez Yoast SEO

Zależało mi na wykorzystaniu Yoast SEO, bo jest ona stosunkowo prosta w obsłudze z poziomu panelu edycji. Właściciele strony korzystali z tej wtyczki już wcześniej, więc obsługa nie jest dla nich żadnym problemem. W skonfigurowaniu Yoast SEO z Gatsby bardzo pomogło rozszerzenie WPGraphQL. Pozwoliło ono pobrać wszystkie pola (tytuł, opis, obrazek wyróżniający dla Facebook’a czy Twittera). Istotne było dla mnie to, by strona w Gatsby miała takie same funkcjonalności jak motyw budowany od podstaw.

Dostosowanie witryny do wymogów Google Lighthouse oraz PWA

Moim celem było to, by osiągnąć jak najlepsze wyniki w testach Google Lighthouse i GTMetrix. Oczywiście nie za wszelką cenę. Nie chciałem odmawiać sobie wdrożenia kodu dla Google Analytics, bądź Facebook Piksela. Ponadto o ile było to możliwe chciałem zadbać o to by w zakładce Accessibility, Best Practices oraz SEO uzyskać maksimum. Istotne było dla mnie również to, by strona była zgodna z wymogami Progressive Web App – czyli, żeby była możliwość obsługi strony internetowej tak jak z normalnej aplikacji w telefonie. Mimo faktu, że strona jest mała to wynik z fajerwerkami w teście Google Lighthouse miło mnie zaskoczył! 😉

Możliwość uruchomienia Gatsby na swoim hostingu

Tak jak wcześniej wspomniałem zależało mi na tym, by znaleźć hosting, który umożliwiłby obsługę Gatsby. Wybór padł na hosting od MyDevil.net, który oferuje pełne wsparcie dla Node.js.

Chciałem sprawdzić rozwiązanie, które pozwoliłoby moim klientom czuć się niezależnymi ode mnie. Wybór padł na hosting od MyDevil.net, który oferuje pełne wsparcie dla Node.js. Uruchomienie samej aplikacji na hostingu MyDevil.net nie było problemem. Początkowo należało dostosować wymagania aplikacji do właściwości serwera.

Aktualizacja danych z WordPressa w Gatsbym

Zależało mi jednak na tym, by aktualizacja danych z WordPressa odbywała się automatycznie. Nie chciałem po każdym dodanym wpisie logować się do konsoli i uruchamiać polecenia budowania stron statycznych. Rozpocząłem jednak od małych rzeczy. Spróbowałem automatycznego odświeżania treści co pół godziny. Na sam początek było to wystarczające. Wiedziałem jednak, że to rozwiązanie jest w porządku ale tylko na krótką metę. Poprawienie pilnej literówki i oczekiwanie na odświeżenie treści mogło okazać się niezwykle irytujące. Po długim czasie spędzonym z supportem MyDevil.net udało się osiągnąć cel. W tym miejscu bardzo chciałbym podziękować za udzielenie potrzebnego wsparcia.

W trakcie pisania wpisu otrzymałem wiele wskazówek. Między innymi o tym, że w przypadku połączenia WordPress i Gatsby warto spróbować wykorzystać do tego GitLaba. W jednym z najbliższych projektów planuję go wykorzystać. Z pewnością o aktualizacji poinformuję w tym miejscu.

Zalety i wady tworzenia strony na WordPressie za pomocą Gatsby

Zalety budowania stron w oparciu o Gatsby i WordPress:

• Przyjazny interfejs WordPress – udało mi się uzyskać pełną możliwość edycji zarówno podstron jak wpisów z poziomu Edytora Gutenberg. Podobnie sytuacja wygląda z menu oraz widżetami,
• Wydajność – generator stron statycznych powoduje, że strony zbudowane w Gatsby ładują się niezwykle szybko,
• Prostota rozbudowy strony internetowej dla osób technicznych – dla osób obytych z Node, npm, React oraz Gatsby dodanie pełnej kompatybilności np. z Progressive Web App ogranicza się do instalacji i konfiguracji dodatkowego pluginu,
• Początki są najtrudniejsze, ale później już z górki – to sprawia, że chciałbym się zaznajomić z Gatsby na dłużej. O ile start może być ciężki o tyle późniejsze tworzenie witryn może się okazać niezwykle szybkie i bezproblemowe,
• Koszt hostingu – w moim przypadku koszt hostingu wyniósł tyle samo, co w przypadku normalnej witryny. Skorzystałem z hostingu współdzielonego od MyDevil.net, który oferuje naprawdę spore możliwości o których wspomniałem we wpisie.

Wady korzystania z rozwiązania opartego na Gatsby i WordPress:

• Długi czas generowania aplikacji – przeładowanie strony czteryokrazenia.pl pomimo małych rozmiarów trwa około 15 sekund,
• Ograniczone możliwości rozbudowania przez osoby nietechniczne – to o czym wspominałem na samym początku. Zabierając obsługę front-endu WordPressowi automatycznie zabieramy możliwość obsługi chociażby wtyczek. O ile dla osób technicznych nie jest problem – o tyle dla tej drugiej grupy to bariera nie do przejścia.

Przy jakich stronach internetowych Gatsby sprawdzi się najlepiej?

Moim zdaniem Gatsby sprawdzi się najlepiej w poniższych sytuacjach:

• Strony internetowe, której funkcjonalności docelowo nie będą się znacząco rozszerzać (na przykład mała strona dla lokalnej firmy na której znajduje się lista usług i prosty formularz kontaktowy),
• Witryny, na których aktualizacja treści jest wykonywana rzadko (na przykład raz na pół roku),
• Strony www, której właściciel oczekuje świetnej wydajności i nie jest

Podsumowanie

Podsumowując. Pierwszą budowę strony internetowej w oparciu o Gatsby będę z pewnością miło wspominać. Pomimo tego, że napotkałem wiele przeciwności jestem szczęśliwy że wszystko udało się dociągnąć tak jak sobie wyobrażałem. W przypadku strony czteryokrazenia.pl wybór Gatsby był idealnym rozwiązaniem zarówno dla mnie jak i dla moich klientów. Wilk syty i owca cała.