W ostatnim czasie Jamstack zyskuje na popularności. Jamstack jest odpowiedzią na dynamiczny rozwój stron internetowych, który w odczuciu wielu stał się uciążliwy i powolny. Z jego pomocą jesteśmy w stanie budować strony, których performance bije na głowę większość stron internetowych.
Czym jest Jamstack?
W porównaniu do innych bardziej znanych stacków technologicznych, takich jak, np. MERN, czy LAMP - Jamstack jest jedynie nowym podejściem do tworzenia stron oraz aplikacji internetowych.
Dobór narzędzi oraz technologii jest tak naprawdę dowolny i bardzo zróżnicowany, co pozwala nam stworzyć w architekturze Jamstack niemal każdy rodzaj strony - od bloga, po aplikacje czy sklepy internetowe.
Jamstack składa się z kilku elementów:
- JavaScript - funkcjonalność strony oparta jest na JavaScript. Możesz użyć zarówno Reacta, jak i innych popularnych frameworków, jak Angular, Vue.js lub wykorzystać czysty Vanilla JavaScript.
- API - komunikacja z serwerem oraz bazą danych odbywa się poprzez API. Za pomocą JavaScript pobieramy treść strony.
- Markup - za pomocą generatorów stron statycznych tworzą się statyczne pliki HTML zawierające treść pobraną z API.
Jak widzisz, JavaScript odgrywa tutaj kluczową rolę, jednak można również skorzystać z takich języków jak Ruby, Go, czy Python.
W jaki sposób działa Jamstack?
Strona oparta na Jamstack składa się z plików statycznych. Oznacza to, że nie są one dynamicznie generowane przez serwer aplikacji, gdy użytkownik wchodzi na stronę, zamiast tego pliki strony są generowane w czasie budowania aplikacji.
I co najlepsze? Skoro są to zwykłe pliki HTML, nie potrzebujesz do tego specjalnego serwera np. Node.js, tylko prosty serwer plików statycznych.
Strona Jamstack jest budowana za pomocą generatora stron statycznych, który pobiera szablony i łączy je z treścią, zazwyczaj przechowywaną jako pliki Markdown, aby dynamicznie wygenerować HTML, CSS i JavaScript strony.
Jest to proces podobny do tego, który dynamiczny serwer WWW, taki jak PHP, przechodzi przy każdym żądaniu użytkownika, ale zamiast tego, proces ten zachodzi w czasie budowania strony, zanim zostanie ona wrzucona na serwer.
To, co odróżnia stronę Jamstack od zwykłej statycznej strony, to fakt, że chociaż składa się ona ze statycznych zasobów, może być niezwykle dynamiczna. Pierwszym kluczowym składnikiem do stworzenia tej dynamicznej funkcjonalności jest API.
API może być wywoływane przez klienta przeglądarki w czasie działania lub nawet przez generator statycznych stron w czasie budowania strony.
Drugim kluczowym składnikiem dynamicznej strony Jamstack jest zdolność do wywoływania API i innych usług asynchronicznie na kliencie poprzez JavaScript. JavaScript umożliwia statycznym zasobom dynamiczną zmianę za pomocą manipulacji DOM.
Pozwala to na rzeczy, które w przeciwnym razie wydają się niemożliwe przy użyciu statycznych plików, takich jak logowanie użytkownika lub koszyk zakupowy.
Zalety Jamstack
Skoro już wiesz, w jaki sposób działa Jamstack, pora odpowiedzieć na pytanie - dlaczego powinieneś go znać?
Wydajność
Największą zaletą Jamstack jest performance strony. Tak jak wspomniałem wyżej - użytkownik, wchodząc na stronę pobiera już gotowy plik HTML z treścią strony. Nie ma potrzeby wysyłać żadnych zapytań do bazy, czy do serwera, dzięki czemu strona ładuje się błyskawicznie.
Bezpieczeństwo
Skoro na serwer trafiają wcześniej wygenerowane pliki HTML, a dane z CMS pobierane są na Twojej lokalnej maszynie, tak naprawdę nie musisz martwić się o nic. Na serwerze nie znajdują się żadne wrażliwe dane, więc nie ma nic do zhakowania.
Koszt
Wrzucasz na serwer pliki statyczne, oznacza to, że nie musisz płacić za drogie plany hostingowe, nie potrzebujesz backendu, ani bazy danych. Jest wiele serwisów, które pozwolą Ci postawić stronę zupełnie za darmo, korzystając, np. z Github Pages.
SEO friendly
Prerenderowane pliki ułatwiają indexowanie i rozumienie Twojej strony przez boty i crawlery. Na dodatek czas ładowania strony dokłada tutaj swoją cegiełkę.
Developer experience
Strony internetowe Jamstack są budowane bez serwera internetowego lub backendu, co zmniejsza złożoność podczas budowania niestandardowych stron internetowych. A także pozwala programistom skupić się bardziej na front-end i dostarczaniu treści.
Wdrażanie strony opartej na Jamstack jest również łatwiejsze niż w tradycyjnym stacku jak np. MERN, czy LAMP.
Jakie Są Wady Jamstack?
Brak danych w czasie rzeczywistym
Ponieważ mówimy o statycznych stronach, nie masz dostępu do dynamicznie zmieniających się danych. Chyba że zintegrujesz swoją stronę z zewnętrznym API i mocno wykorzystasz JavaScript na frontendzie.
Trudna skalowalność
Statyczne strony są również trudne do skalowania. Za każdym razem, gdy dodajesz nowy post, cała strona musi zostać zbudowana, zwiększając czas budowy z każdym nowym plikiem.
Jeśli tylko publikujesz treści co kilka dni i masz nie więcej niż kilkanaście postów na blogu, to nie jest to dla Ciebie problem. Ale jeśli stale tworzysz nowe treści i masz artykuły w tysiącach, będziesz potrzebował CMS lub użyć Next.js, o którym opowiem Ci w następnych artykułach.
Jaką technologię wybrać?
Generator stron statycznych
- Gatsby - mój faworyt, za pomocą którego zbudowałem tego bloga (tutaj znajdziesz poradnik). Oparty jest na React i posiada masę funkcjonalności oraz świetnie napisaną dokumentację.
- Hugo - jest napędzany przez Go, ale nie musisz znać tego języka, aby go używać. Jego zaletą jest zdecydowanie bardzo szybkie generowanie stron.
- Next.js - framework pozwalający generować strony po stronie serwera, wykorzystując React. W miarę rozwoju bloga z pewnością przeniosę się na ten framework.
- Jekyll - oparty na Ruby, jest niezwykle prosty i konfigurowalny.
HeadlessCMS
- Hygraph - aktualnie na nim opiera się mój blog. Jego darmowy plan ma ogromne limity, więc będzie wystarczający dla większości stron.
- Contentful - jeden z najbardziej popularnych HeadlessCMS'ów, który pozwoli zbudować niemal każdy rodzaj strony.
- Strapi - kolejny bardzo popularny HeadlessCMS zdecydowanie warty uwagi.
Serwer
- Netlify - niezywkle szybki CDN, którego możesz połączyć z GitHubem, aby łatwo deployować stronę.
- Vercel - CDN twórców Next.js, który również możesz połączyć z GitHubem.
- GitHub Pages - szybki i łatwy sposób na publikowanie statycznych stron za darmo.
- Hostinger - prosty hosting plików statycznych, wystarczający, jeśli budujesz prostą stronę.
Popularne strony stworzone w Jamstack
- Hulu - Next.js
- Lego - Next.js
- National Geographics - Gatsby.js
- Elton John - Next.js
- Nike - Gatsby.js
Podsumowanie
Jamstack namieszał na scenie web developementu.
Pozwala w prosty i szybki sposób stworzyć bardzo wydajne strony internetowe, jednak nie zawsze jest idealnym wyborem. Z pewnością jest godny uwagi i warto jest mieć go na oku w 2022 roku.
Sam zdecydowałem się na wybór tego rozwiązania, tworząc bloga. Z ręką na sercu mogę stwierdzić, że sprawia wiele frajdy i nauczyłem się dzięki niemu wielu nowych, przydatnych rzeczy.
Jeśli chcesz zobaczyć Jamstack w praktyce, zapraszam do mojego artykułu, w którym od zera buduję bloga używając Gatsby.js i GraphCMS.