Udokumentowana publicznie architektura Gatsby
Gatsby opiera się na React i narzędziach Node.js. Programiści piszą komponenty React, natomiast Gatsby koordynuje pobieranie danych, zapytania GraphQL, tworzenie stron, przetwarzanie zasobów, pakowanie i wybrane zachowanie renderowania.
Opisuje to architekturę frameworka udokumentowaną dla projektów Gatsby. Nie stanowi wnioskowania o prywatnych systemach hostingowych, usługach wewnętrznych ani topologii operacyjnej stojącej za gatsbyjs.com.
Podstawowe elementy konstrukcyjne
| Warstwa | Publicznie udokumentowana rola |
|---|---|
| React | Zapewnia komponenty, JSX, stan i interakcję po stronie przeglądarki. |
| Interfejsy API Gatsby | Łączą konfigurację, pobieranie danych, tworzenie węzłów, tworzenie stron i pracę cyklu życia renderowania. |
| Warstwa danych | Normalizuje pobrane rekordy jako węzły i udostępnia je poprzez schemat GraphQL. |
| Wtyczki źródłowe | Importują treść z plików, systemów treści, interfejsów API i usług. |
| GraphQL | Wybiera pola źródłowe dla stron i komponentów w procesie obsługi danych Gatsby. |
| Renderowanie | Obsługuje SSG, DSG, SSR za pośrednictwem getServerData oraz trasy po stronie klienta. |
| Ekosystem wtyczek | Dodaje źródła, transformacje, obsługę obrazów, stylizację, analitykę i inne integracje. |
Od treści do strony
- Wtyczka źródłowa pobiera lub odczytuje treść.
- Gatsby tworzy węzły i buduje swój schemat danych.
- Zapytanie strony pobiera wymagane pola.
- Szablon React renderuje pobraną treść.
- Gatsby tworzy lub udostępnia stronę zgodnie z jej trybem renderowania.
Strony statyczne są generowane podczas kompilacji. Strony odroczone są odkładane do momentu ich pierwszego żądania w zgodnej infrastrukturze. Strony SSR wykonują logikę w czasie żądania za pośrednictwem getServerData. Trasy po stronie klienta rezerwują wybrane ścieżki dla zachowania aplikacji w przeglądarce.
Architektura nie gwarantuje określonego czasu kompilacji, szybkości strony ani wyniku wyszukiwania. Rezultaty zależą od opóźnień źródeł, liczby węzłów i stron, projektu zapytań, obrazów, JavaScript, buforowania, hostingu i samej implementacji.
