Portale internetowe z wykorzystaniem Strapi i Astro

Korzyści z wykorzystania Strapi z Astro

• Niezrównana wydajność i szybkość: Astro jest zaprojektowany z myślą o szybkości, domyślnie wysyłając zero JavaScriptu do przeglądarki. W połączeniu ze Strapi jako headless CMS, umożliwia tworzenie błyskawicznie ładujących się stron statycznych (SSG) i dynamicznych (SSR), co przekłada się na doskonałe wrażenia użytkownika i lepsze SEO.
• Architektura “Islands” dla optymalnej interaktywności: Astro pozwala na tworzenie interaktywnych komponentów (wysp) przy użyciu ulubionych frameworków UI (React, Vue, Svelte itp.) lub czystego JavaScriptu, podczas gdy reszta strony pozostaje statyczna. To minimalizuje ilość kodu JavaScript i skraca czas do interaktywności (TTI).
• Elastyczność w wyborze frameworka UI: Astro nie narzuca jednego frameworka. Możesz używać komponentów z różnych bibliotek na tej samej stronie lub w ogóle z nich zrezygnować na rzecz HTML i JavaScript, co daje deweloperom ogromną swobodę.
• Wsparcie wielojęzyczności: Strapi natywnie obsługuje zarządzanie treścią w wielu językach. W połączeniu z Astro, które również posiada mechanizmy do internacjonalizacji, ułatwia to docieranie do globalnej publiczności z treściami dostosowanymi do ich języka.
• Skalowalność i bezpieczeństwo: Architektura headless oddziela backend (Strapi) od frontendu (Astro). Obie części mogą być skalowane niezależnie. Strapi oferuje solidne mechanizmy bezpieczeństwa, a statycznie generowane strony Astro są z natury mniej podatne na ataki.
• Zaawansowane interfejsy i portale użytkownika: Elastyczność Astro i Strapi pozwala na tworzenie zaawansowanych interfejsów, takich jak portale klienta z rejestracją i logowaniem. Użytkownicy mogą zarządzać swoimi danymi, dostępem do usług czy spersonalizowanymi treściami, a administratorzy łatwo zarządzać zawartością w Strapi.

Czym jest Strapi w szczegółach?

Strapi to headless CMS (system zarządzania treścią) oparty na Node.js, zbudowany na frameworku Koa.js. Oznacza to, że na poziomie backendu wykorzystywane są możliwości JavaScript i programowania asynchronicznego. Strapi przechowuje dane w wybranej przez Ciebie bazie danych (obsługiwane są PostgreSQL, MySQL, SQLite, MongoDB i inne). Struktura danych (modele treści) jest definiowana przez programistę za pomocą panelu administracyjnego lub plików konfiguracyjnych.

Kluczowym aspektem działania Strapi jest automatyczne generowanie API (Application Programming Interfaces) 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). Do interakcji wykorzystywane są standardowe metody HTTP:
  • GET: Żądanie pobrania danych (np. listy artykułów, konkretnego wpisu). Dane przesyłane są w formacie JSON (JavaScript Object Notation) w ciele odpowiedzi HTTP.
  • POST: Żądanie utworzenia nowego zasobu (np. wysłanie formularza). Dane zazwyczaj przesyłane są w formacie JSON w ciele żądania HTTP.
  • PUT/PATCH: Żądanie aktualizacji istniejącego zasobu. Dane również przesyłane są w formacie JSON w ciele żądania HTTP.
  • DELETE: Żądanie usunięcia zasobu.

  Dostęp do tych endpointów odbywa się za pomocą określonych adresów URL (URI – Uniform Resource Identifier), które są automatycznie generowane na podstawie nazw Twoich modeli treści (np. `/api/articles`, `/api/products`).

• GraphQL API: Strapi udostępnia również API oparte na GraphQL – języku zapytań dla Twojego API. W przeciwieństwie do REST, gdzie zazwyczaj otrzymujesz stały zestaw danych, GraphQL pozwala klientom (np. Astro) żądać tylko tych danych, których rzeczywiście potrzebują. Zwiększa to efektywność i zmniejsza ilość przesyłanych danych. GraphQL używa żądań HTTP POST, gdzie w ciele żądania przesyłany jest ciąg znaków z zapytaniem GraphQL. Odpowiedź również przychodzi w formacie JSON. Strapi automatycznie generuje schemat GraphQL na podstawie Twoich modeli treści, w tym typy, pola, zapytania (queries) i mutacje (mutations).

Uwierzytelnianie i autoryzacja w Strapi mogą być realizowane na różne sposoby, w tym za pomocą JSON Web Tokens (JWT) dla API opartych na REST i GraphQL. Zapewnia to bezpieczny dostęp do treści i funkcji administracyjnych.

Jak Astro współdziała ze Strapi?

Astro, jako nowoczesny framework do budowy szybkich, zorientowanych na treść stron internetowych, współdziała ze Strapi poprzez wysyłanie żądań HTTP do API udostępnianych przez Strapi. Może to być zarówno RESTful API, jak i GraphQL API, w zależności od preferencji dewelopera i specyfiki projektu.

Pobieranie danych (Fetching Data):

• RESTful API: W plikach `.astro` (w części frontmatter wykonywanej po stronie serwera podczas budowania lub renderowania) lub w skryptach klienckich (dla dynamicznych interakcji), będziesz używać standardowej funkcji `Workspace` (lub bibliotek takich jak `axios`) do wysyłania żądań HTTP GET na adresy URL udostępniane przez Strapi. Na przykład, aby pobrać listę artykułów, wyślesz żądanie `GET` na `/api/articles`. Strapi zwróci dane w formacie JSON, które Astro następnie wykorzysta do wyrenderowania HTML.
• GraphQL API: Do interakcji z GraphQL API Strapi, w Astro można używać funkcji `Workspace` z metodą POST, wysyłając zapytanie GraphQL w ciele żądania, lub skorzystać z lekkich klientów GraphQL. Definiujesz zapytania GraphQL (queries) w celu pobrania potrzebnych danych i wysyłasz je na endpoint GraphQL Strapi (zazwyczaj `/graphql`). Odpowiedź w formacie JSON jest następnie przetwarzana przez Astro.

Wysyłanie danych (Submitting Data):

• RESTful API: Do wysyłania danych (np. z formularzy kontaktowych, komentarzy), skrypty po stronie klienta w Astro będą wysyłać żądania HTTP POST, PUT lub PATCH na odpowiednie endpointy API Strapi. Dane zazwyczaj są serializowane do formatu JSON i przesyłane w ciele żądania.
• GraphQL API: Do modyfikowania danych (np. tworzenie lub aktualizacja wpisów), skrypty klienckie w Astro będą używać mutacji GraphQL (mutations), które są wysyłane na endpoint GraphQL Strapi za pomocą żądań HTTP POST.

Skąd konkretnie pochodzą dane:

• Strapi: Dane są przechowywane w skonfigurowanej bazie danych. Strapi pobiera, przetwarza i udostępnia te dane za pośrednictwem swoich API (RESTful lub GraphQL) w odpowiedzi na żądania HTTP od Astro.
• Astro: Astro nie przechowuje samych danych treści zarządzanych przez Strapi. On pobiera te dane za pośrednictwem API Strapi i używa ich do generowania stron HTML (statycznie podczas budowy lub dynamicznie na serwerze). Astro może implementować mechanizmy cache’owania po swojej stronie, ale źródłem prawdy zawsze jest baza danych Strapi.

Uwierzytelnianie i autoryzacja w połączeniu

Do ochrony treści i API Strapi używane są mechanizmy uwierzytelniania i autoryzacji. Aplikacja Astro (szczególnie jej części klienckie wymagające dostępu do chronionych zasobów) musi poprawnie się uwierzytelnić. Może to obejmować wysyłanie tokenów (np. JWT) w nagłówkach żądań HTTP, które Strapi weryfikuje w celu określenia uprawnień dostępu.

Cechy generowania statycznego (SSG) i renderowania po stronie serwera (SSR) w Astro

• SSG (Static Site Generation): Astro doskonale sprawdza się w SSG. Dane z API Strapi są pobierane w czasie budowania projektu (build time). Astro generuje kompletne pliki HTML z już pobranymi danymi. Kiedy użytkownik odwiedza stronę, otrzymuje gotowy HTML, co zapewnia ekstremalnie szybkie ładowanie. Jest to domyślny i preferowany tryb dla wielu stron opartych na treści.
• SSR (Server-Side Rendering): Astro wspiera również renderowanie po stronie serwera. W tym trybie dane z API Strapi są pobierane przy każdym żądaniu użytkownika do serwera Astro. Serwer renderuje stronę HTML “na bieżąco” z aktualnymi danymi i wysyła ją do przeglądarki. Zapewnia to wyświetlanie najświeższych danych, ale może nieznacznie wydłużyć czas odpowiedzi serwera w porównaniu do SSG.
• Architektura “Islands”: Niezależnie od trybu (SSG czy SSR), Astro pozwala na “hydrację” tylko wybranych, interaktywnych komponentów (tzw. wysp) po stronie klienta. Oznacza to, że większość strony pozostaje statyczna (czysty HTML i CSS), a JavaScript ładowany jest tylko tam, gdzie jest to absolutnie konieczne, co znacząco poprawia wydajność.

Podsumowanie

Współdziałanie Strapi i Astro opiera się na standardowych protokołach internetowych, takich jak HTTP, oraz formatach danych, takich jak JSON. Strapi pełni rolę potężnego, elastycznego backendu, udostępniając dostęp do treści poprzez RESTful lub GraphQL API. Astro, jako frontend zorientowany na wydajność i elastyczność, wykorzystuje te API do budowy niezwykle szybkich stron internetowych, generując strony statycznie (SSG) lub renderując je po stronie serwera (SSR) i minimalizując ilość wysyłanego JavaScriptu dzięki architekturze “islands”. Wybór między REST a GraphQL zależy od specyfiki projektu i preferencji deweloperów.