Frontity, czyli React & WordPress

WordPress potrafi być niezawodnym oraz potężnym narzędziem, o ile jest wykorzystywany we właściwym celu. Próg wstępu jest dosyć niski, co sprawia, iż chętnie sięgają po niego również początkujący web developerzy, a choćby ludzie którzy nigdy nie mieli okazji programować.

WordPress nie traci również na popularności. W momencie pisania artykułu (Maj, 2022) 42.9% stron internetowych w sieci działa właśnie na nim.

Jednym ze sposobów, aby sprawić żeby to narzędzie było jeszcze lepsze jest podejście headless. 

Celem artykułu jest przedstawienie zalet oraz wad tego podejścia oraz krótki opis frameworka Frontity.

Zacznijmy od tego czym NIE jest headless CMS.

WordPress ma w zwyczaju obsługiwać zarówno front end jak i back end, setup polega na instalacji jednej instancji CMS i działania na niej. Pliki są ściśle powiązane z szablonem oraz są z nim zintegrowane.

To podejście jest najpopularniejsze oraz najczęściej wybierane przez początkujących użytkowników, którzy chcą w szybki sposób stworzyć prostą stronę internetową.

Podejście headless zapewnia nam wygodę oddzielenia warstwy wizualnej naszej aplikacji od warstwy zarządzania treścią. Zamiast bezpośrednio zapewnić wbudowaną komunikację między frontem a cms’em, wystawiane jest REST API z którym komunikuje się nasz front end (w tym przypadku head).

Jeżeli naszym celem jest skorzystanie z takiej architektury, jednym z rozwiązań może być wykorzystanie biblioteki React.

Pojawia się wtedy niestety kilka problemów, których o ile nie przemyślimy w odpowiedni sposób, mogą sprawić iż nasza strona nie będzie funkcjonować w sposób poprawny z ogólnie przyjętymi zasadami oraz praktykami tworzenia tego typu stron.

Głównymi zaletami Frontity, są problemy jakie rozwiązuje po stronie następujących zagadnień. 

Jeżeli zdecydujemy się na użycie biblioteki React, to przez cały czas nasza strona będzie się renderować po stronie klienta, co będzie oznaczało, iż stracimy wszelkie benefity SEO. Zalecane jest użycie frameworków takich jak Next.js, Gatsby lub Frontity który jest tematem tego artykułu.

Frontity zapewnia optymalizację SEO tworzonej strony internetowej, tak aby była poprawnie zaindeksowana. Framework zapewni nam dostarczenie gotowego oraz sformatowanego pliku HTML opartego o nasze komponenty napisane w React.

Frontity dostarcza nam również wiele możliwości konfiguracyjnych.

Gdy budujemy nasz projekt Frontity jego najważniejszy kod jest inicjalizowany tylko raz. Framework zapewnia nam opcje pre-fetch’owania stron oraz ich danych out-of-the-box. Przez developerów została wykorzystana strategia Serverless Pre-rendering (SPR) w celu renderowania plików HTML „w locie”.

Jeśli zastosujemy strategię headless w kontekście rozwiązań CMS, nasza strona będzie o wiele lżejsza, co sprawi iż doświadczenie użytkownika będzie o wiele lepsza niż przy tradycyjnym podejściu.

Ponieważ front end naszej strony jest hostowany w odosobnieniu od CMS’a, to potencjalny atakujący ma utrudnione zadanie próbując wyrządzić nam szkody. Częstymi lukami w instalacjach WordPress są podejrzane lub słabo przetestowane wtyczki, które posiadają szereg podatności. Korzystając z podejścia headless uniemożliwiamy spory procent ataków, ot tak.

Gdy korzystamy z podstawowej wersji WordPress’a, jesteśmy skazani na język programowania PHP. Mamy dużą dowolność w doborze wtyczek oraz dopasowania naszego motywu, jednak nie dla wszystkich taka opcja jest odpowiednia. Wykorzystując React po stronie front, nadal możemy tworzyć i dostosowywać naszą treść w CMS.

Pozwala nam to wprowadzić porządek w przypadku większych projektów, gdzie może istnieć podział na dwa zespoły developerów, którzy specjalizują się w innych technologiach.

Ponadto możemy w dowolnym momencie zmienić architekturę (np. wybór innego frameworku front end) naszego projektu i nie będzie to stanowiło problemu.

Jak już wcześniej wspomniałem, istnieją różne możliwości wdrożenia nowej architektury, jednym z godnych konkurentów Frontity może być Next.js lub Gatsby.

Jedną z różnic jest to, iż Frontity zostało stworzone specjalnie pod integrację z WordPress. Zapewnia optymalizację, odpowiednie wtyczki oraz bogatą bibliotekę, pozwalającą nam na komunikację z CMS’em. 

Next.js lub Gatsby są dosyć ogólnymi rozwiązaniami, które pozwalają nam głównie na dobór odpowiedniej strategii renderowania takich jak SSR lub SSG.

Jeśli decydujemy się na korzystanie z Next.js, to na nas spoczywać będzie odpowiedzialność stworzenia własnej architektury front end stworzonej do integracji z naszym CMS’em. 

Zaletą korzystania z Next.js może być jego popularność, bez problemu powinniśmy znaleźć wśród community odpowiedź na zagadnienie z którym się trapimy.

Istnieje wiele materiałów ze strony twórców Gatsby pokazujących możliwości zintegrowania ich rozwiązania z WordPress oraz skonfigurowanie architektury headless CMS. 

Dostępny jest również szereg pluginów oraz artykułów prowadzących nas za rękę. Bardzo ważna jest także możliwość zintegrowania naszego systemu z wtyczką WooCommerce. 

Takie rozwiązanie nie jest niestety jeszcze dostępne we Frontity (mowa oczywiście rozwiązaniu o zaproponowanym przez twórców, ponieważ samodzielnie możemy stworzyć dla niego alternatywę).

Dostępne jest wiele ciekawych rozwiązań oraz opcji wyboru, ale najpierw powinniśmy się zastanowić nad kilkoma kwestiami. 

Czy dane narzędzie rzeczywiście jest nam potrzebne? 
Sama nazwa nowej fancy technologii może przysłonić nam na chwilę rozumowanie, podczas gdy tradycyjne podejście jest bardzo często wystarczającym rozwiązaniem.

Do czego aplikacja ma służyć i w jaki sposób działać?
Jednym z wielu zagadnień do rozważenia jest kwestia samej struktury aplikacji i to jakie ma być jej główne zastosowanie. 

Może się okazać, iż wcale nie potrzebujemy CMS’a lub nasze potrzeby są na tyle skomplikowane, iż lepiej będzie napisać własne rozwiązanie od zera. 

Kolejną sprawą jest wdrożenie.
W przypadku headless CMS mamy do czynienia z dwoma instacjami komunikującymi się ze sobą. Wdrożenie zwykłego WordPress’a jest dosyć łatwe choćby dla niedoświadczonej osoby.

Mimo wszystko rozwiązanie headless jest zdecydowanie bardzo przydatne w przypadku kiedy szukamy sposobów na zoptymalizowanie naszej aplikacji lub zintegrowania jej z naszym ulubionym frameworkiem front endowym.