Gatsby

Warstwa danych GraphQL

Wyróżnikiem Gatsby’ego jest jednolita warstwa danych oparta na GraphQL. Wtyczki źródłowe pobierają treści z różnych miejsc — headless CMS (np. Strapi), plików Markdown, baz danych czy API — i udostępniają je w jednym grafie, z którego komponenty stron pobierają dokładnie te pola, których potrzebują. Dzięki temu zmiana źródła treści nie wymusza przebudowy komponentów: strona dalej pyta ten sam graf o te same pola.

Najważniejsze funkcje

• Ekosystem wtyczek — kilka tysięcy gotowych integracji: źródła danych, analityka, mapy witryn, obsługa obrazów.
• Optymalizacja obrazów — komponent obrazu generuje warianty rozmiarów, formaty nowej generacji i miniatury-zaślepki na czas ładowania.
• Prefetching — Gatsby doładowuje w tle zasoby stron, do których prowadzą widoczne odnośniki, więc nawigacja po serwisie jest niemal natychmiastowa.
• Tryby renderowania — obok pełnej generacji statycznej nowsze wersje wspierają renderowanie odroczone (DSG) i po stronie serwera (SSR), co pozwala nie przebudowywać całego dużego serwisu przy każdej zmianie.

Gatsby a Next.js i Astro

W porównaniu z Next.js Gatsby jest mocniej wyspecjalizowany w stronach opartych na treści: bloga, dokumentację czy serwis firmowy buduje się w nim szybko dzięki wtyczkom i warstwie danych, ale aplikacje z dużą ilością logiki serwerowej wygodniej prowadzi się w Next.js. Z kolei Astro realizuje podobny cel — szybkie strony statyczne — wysyłając do przeglądarki mniej JavaScriptu, za to bez tak rozbudowanej warstwy danych. Wybór sprowadza się do proporcji między treścią a interaktywnością w konkretnym projekcie.

Kiedy Gatsby jest dobrym wyborem?

Wtedy, gdy serwis opiera się na treści z CMS lub plików, zmienia się rzadziej niż jest odwiedzany i ma zespół pracujący już w React. Statyczny wynik builda upraszcza utrzymanie: nie ma serwera aplikacyjnego, który mógłby paść, a powierzchnia ataku ogranicza się do plików statycznych. Ceną jest czas budowania przy bardzo dużych serwisach — i właśnie tam warto sięgnąć po renderowanie odroczone albo rozważyć framework z renderowaniem na żądanie.