Portale internetowe na Strapi i Astro

Korzyści z połączenia Strapi z Astro

• Niezrównana wydajność i szybkość: Astro zostało zaprojektowane z myślą o szybkości i domyślnie nie wysyła do przeglądarki żadnego JavaScriptu. W połączeniu ze Strapi jako headless CMS pozwala tworzyć błyskawiczne strony statyczne (SSG) i dynamiczne (SSR), co przekłada się na doskonałe doświadczenie użytkownika i lepsze SEO.
• Architektura „wysp” dla optymalnej interaktywności: Astro pozwala tworzyć interaktywne komponenty (wyspy) w ulubionych frameworkach UI (React, Vue, Svelte itd.) lub w czystym JavaScripcie, podczas gdy reszta strony pozostaje statyczna. Minimalizuje to ilość kodu JavaScript i skraca czas do interaktywności (TTI).
• Swoboda wyboru frameworka UI: Astro nie narzuca jednego frameworka. Na tej samej stronie można używać komponentów z różnych bibliotek albo polegać wyłącznie na HTML i JavaScripcie, co daje programistom maksymalną swobodę.
• Obsługa wielu języków: Strapi natywnie obsługuje zarządzanie treścią w wielu językach. W połączeniu z Astro, które również oferuje funkcje internacjonalizacji, ułatwia to dotarcie do globalnych odbiorców z dopasowaną treścią.
• Skalowalność i bezpieczeństwo: Architektura headless oddziela backend (Strapi) od frontendu (Astro). Oba można skalować niezależnie. Strapi zapewnia solidne funkcje bezpieczeństwa, a statycznie generowane strony Astro są z natury mniej podatne na ataki.
• Zaawansowane interfejsy użytkownika i portale: Elastyczność Astro i Strapi pozwala budować zaawansowane interfejsy, takie jak portale klienta z rejestracją i logowaniem. Użytkownicy mogą zarządzać swoimi danymi, usługami czy spersonalizowaną treścią, a administratorzy łatwo zarządzają treścią w Strapi.

Czym dokładnie jest Strapi?

Strapi to headless CMS (system zarządzania treścią) zbudowany na Node.js, oparty na frameworku Koa.js. Oznacza to, że na poziomie backendu wykorzystuje JavaScript i programowanie asynchroniczne. Strapi przechowuje dane w wybranej przez Ciebie bazie danych (PostgreSQL, MySQL, SQLite, MongoDB itd.). Struktury treści (modele treści) definiuje programista w panelu administracyjnym lub w plikach konfiguracyjnych.

Kluczową cechą Strapi jest automatyczne generowanie API (interfejsów programowania aplikacji) na podstawie zdefiniowanych modeli treści. Domyślnie generowane są dwa główne typy API:

• RESTful API: To API jest zgodne z architekturą REST (Representational State Transfer). Używane są standardowe metody HTTP:
  • GET: Pobieranie danych (np. listy artykułów, konkretnego wpisu). Dane są zwracane w formacie JSON w treści odpowiedzi HTTP.
  • POST: Tworzenie nowego zasobu (np. wysłanie formularza). Dane są zwykle przesyłane w formacie JSON w treści żądania HTTP.
  • PUT/PATCH: Aktualizacja istniejącego zasobu. Dane również są przesyłane w formacie JSON w treści żądania HTTP.
  • DELETE: Usunięcie zasobu.

  Dostęp do tych punktów końcowych odbywa się przez określone adresy URL (URI – Uniform Resource Identifiers), generowane automatycznie na podstawie nazw modeli treści (np. `/api/articles`, `/api/products`).

• GraphQL API: Strapi udostępnia także API oparte na GraphQL – języku zapytań dla API. W przeciwieństwie do REST, gdzie zwykle otrzymujesz stały zestaw danych, GraphQL pozwala klientom (np. Astro) żądać tylko tych danych, których faktycznie potrzebują. Zwiększa to wydajność i ogranicza transfer danych. GraphQL korzysta z żądań HTTP POST, w których treść żądania zawiera zapytanie GraphQL. Odpowiedź jest zwracana w formacie JSON. Strapi automatycznie generuje schemat GraphQL na podstawie modeli treści, obejmujący typy, pola, zapytania i mutacje.

Uwierzytelnianie i autoryzację w Strapi można zrealizować na wiele sposobów, m.in. za pomocą JSON Web Tokens (JWT) zarówno dla API REST, jak i GraphQL. Zapewnia to bezpieczny dostęp do treści i funkcji administracyjnych.

Jak Astro współpracuje ze Strapi?

Astro, jako nowoczesny framework do budowy szybkich stron nastawionych na treść, komunikuje się ze Strapi, wysyłając żądania HTTP do API udostępnianych przez Strapi. Może to być RESTful API lub GraphQL API, w zależności od preferencji programistów i wymagań projektu.

Pobieranie danych:

• RESTful API: W plikach `.astro` (po stronie serwera podczas budowania/renderowania) lub w skryptach po stronie klienta (dla dynamicznych interakcji) używa się standardowego `fetch` (lub bibliotek takich jak `axios`), aby wysyłać żądania HTTP GET do punktów końcowych API Strapi. Na przykład, aby pobrać artykuły, wysyłasz `GET /api/articles`. Strapi zwraca dane w formacie JSON, których Astro używa następnie do renderowania HTML.
• GraphQL API: W przypadku GraphQL Astro może używać `fetch` z żądaniami POST, wysyłając zapytanie GraphQL w treści żądania, lub korzystać z lekkich klientów GraphQL. Definiujesz zapytania, aby pobrać potrzebne dane, i wysyłasz je do punktu końcowego GraphQL w Strapi (zwykle `/graphql`). Odpowiedź JSON jest przetwarzana przez Astro.

Przesyłanie danych:

• RESTful API: Aby przesłać dane (np. formularze kontaktowe, komentarze), skrypty Astro po stronie klienta wysyłają żądania HTTP POST, PUT lub PATCH do odpowiednich punktów końcowych API Strapi. Dane są zwykle serializowane do formatu JSON w treści żądania.
• GraphQL API: Do modyfikowania danych (np. tworzenia lub aktualizowania wpisów) skrypty Astro po stronie klienta używają mutacji GraphQL wysyłanych do punktu końcowego GraphQL w Strapi przez HTTP POST.

Skąd pochodzą dane:

• Strapi: Dane są przechowywane w skonfigurowanej bazie danych. Strapi pobiera, przetwarza i udostępnia te dane przez API RESTful lub GraphQL w odpowiedzi na żądania HTTP z Astro.
• Astro: Astro samo nie przechowuje danych treści. Pobiera dane z API Strapi i używa ich do generowania stron HTML (statycznie podczas budowania lub dynamicznie na serwerze). Astro może stosować cache, ale jedynym źródłem prawdy jest zawsze baza danych Strapi.

Uwierzytelnianie i autoryzacja w tym połączeniu

Do ochrony treści i API Strapi stosuje się mechanizmy uwierzytelniania i autoryzacji. Aplikacje Astro (zwłaszcza części po stronie klienta wymagające dostępu do chronionych zasobów) muszą się poprawnie uwierzytelniać. Może to polegać na wysyłaniu tokenów (np. JWT) w nagłówkach żądań HTTP, które Strapi weryfikuje, aby ustalić uprawnienia dostępu.

Generowanie statyczne (SSG) i renderowanie po stronie serwera (SSR) w Astro

• SSG (Static Site Generation): Astro świetnie radzi sobie z SSG. Dane z API Strapi są pobierane w czasie budowania. Astro generuje kompletne pliki HTML z pobranymi danymi. Gdy użytkownik odwiedza stronę, otrzymuje gotowy HTML, co zapewnia wyjątkowo krótki czas ładowania. To domyślny i preferowany tryb dla wielu stron opartych na treści.
• SSR (Server-Side Rendering): Astro obsługuje również SSR. W tym trybie dane z API Strapi są pobierane przy każdym żądaniu użytkownika do serwera Astro. Serwer renderuje HTML z najnowszymi danymi i wysyła go do przeglądarki. Zapewnia to aktualną treść, ale może nieco wydłużyć czas odpowiedzi serwera w porównaniu z SSG.
• Architektura „wysp”: Niezależnie od SSG czy SSR Astro umożliwia „hydrację” tylko wybranych interaktywnych komponentów (wysp) po stronie klienta. Większość strony pozostaje statyczna (czysty HTML i CSS), a JavaScript jest ładowany tylko tam, gdzie jest to absolutnie konieczne, co znacząco poprawia wydajność.

Podsumowanie

Integracja Strapi i Astro opiera się na standardowych protokołach sieciowych, takich jak HTTP, i formatach danych, takich jak JSON. Strapi pełni rolę wydajnego, elastycznego backendu, udostępniającego treść przez API RESTful lub GraphQL. Astro, jako frontend nastawiony na wydajność i elastyczność, korzysta z tych API, aby budować niezwykle szybkie strony — generowane statycznie (SSG) lub renderowane na serwerze (SSR) — przy minimalnym obciążeniu JavaScriptem dzięki architekturze „wysp”. Wybór między REST a GraphQL zależy od specyfiki projektu i preferencji programistów.