Portale internetowe na Strapi i Next.js

Korzyści z połączenia Strapi z Next.js

• Większa elastyczność: Architektura Strapi pozwala wykorzystywać treść w różnych interfejsach frontendowych, nie tylko w aplikacjach webowych. W połączeniu z Next.js umożliwia tworzenie bogatych, interaktywnych doświadczeń użytkownika z płynną aktualizacją treści.
• Obsługa wielu języków: Strapi obsługuje zarządzanie treścią w wielu językach, dzięki czemu firmy mogą docierać do globalnych odbiorców, dostarczając treść w wielu językach bezpośrednio z CMS.
• Szybkość i wydajność: Dzięki zastosowaniu Next.js w warstwie frontendu nasze rozwiązanie korzysta z renderowania po stronie serwera (SSR), co poprawia szybkość strony i pozycje SEO. Generowanie statyczne (SSG) w Next.js zapewnia krótki czas ładowania i płynne doświadczenie użytkownika.
• Skalowalność i bezpieczeństwo: Połączenie Strapi i Next.js radzi sobie z dużym ruchem, dzięki czemu idealnie nadaje się do wdrożeń klasy enterprise. Obie platformy zostały zaprojektowane z myślą o bezpieczeństwie i zapewniają solidną ochronę danych i treści.
• Zaawansowane interfejsy użytkownika: Umożliwiamy tworzenie zaawansowanych interfejsów użytkownika, takich jak portale klienta z rejestracją i bezpiecznym logowaniem. Dzięki temu użytkownicy korzystają z portalu jako aktywni klienci, mając dostęp do usług i informacji online. Portale te są projektowane tak, aby zwiększać zaangażowanie użytkowników i ułatwiać zarządzanie treścią, dzięki czemu są przyjazne zarówno dla administratorów, jak i odwiedzających. Stanowią kluczowy punkt styku, w którym dostarczasz użytkownikom spersonalizowane doświadczenia i dopasowaną treść.

Czym dokładnie jest Strapi?

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

Kluczowym aspektem 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). Do interakcji używane są standardowe metody HTTP:
  • GET: Żądanie pobrania danych (np. listy artykułów, konkretnego wpisu). Dane są zwracane w formacie JSON (JavaScript Object Notation) w treści odpowiedzi HTTP.
  • POST: Żądanie utworzenia nowego zasobu (np. wysłanie formularza). Dane są zwykle przesyłane w formacie JSON w treści żądania HTTP.
  • PUT/PATCH: Żądanie aktualizacji istniejącego zasobu. Dane również są przesyłane w formacie JSON w treści żądania HTTP.
  • DELETE: Żądanie usunięcia 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. Next.js) żądać tylko tych danych, których faktycznie potrzebują. Zwiększa to wydajność i zmniejsza ilość przesyłanych danych. GraphQL korzysta z żądań HTTP POST, których treść zawiera zapytanie GraphQL. Odpowiedzi również przychodzą 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 różne sposoby, 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 Next.js współpracuje ze Strapi?

Next.js, jako framework React do budowy aplikacji frontendowych, współpracuje ze Strapi, wysyłając żądania HTTP do API udostępnianych przez Strapi. Może to być API RESTful lub GraphQL, w zależności od preferencji programistów i wymagań projektu.

Pobieranie danych:

• RESTful API: W komponentach Next.js (np. w `getServerSideProps`, `getStaticProps` lub w komponentach klienckich z użyciem `useEffect` i `fetch`) używa się standardowej funkcji `fetch` (lub zewnętrznych bibliotek, takich jak `axios`), aby wysyłać żądania HTTP GET do punktów końcowych Strapi. Na przykład, aby pobrać listę artykułów, wysyłasz żądanie `GET` do `/api/articles`. Strapi zwraca dane w formacie JSON, które są następnie przetwarzane i wyświetlane w komponentach Next.js.
• GraphQL API: Do komunikacji z GraphQL API Strapi Next.js używa dedykowanych klientów GraphQL (np. `Apollo Client`, `Relay`, `urql`). Definiujesz zapytania GraphQL, aby pobrać potrzebne dane, i wysyłasz je do punktu końcowego GraphQL w Strapi (zwykle `/graphql`) za pomocą żądań HTTP POST. Klient GraphQL zajmuje się serializacją zapytania i deserializacją odpowiedzi JSON.

Przesyłanie danych:

• RESTful API: Aby przesłać dane (np. z formularzy), Next.js wysyła żądania HTTP POST, PUT lub PATCH do odpowiednich punktów końcowych API Strapi. Dane są zwykle serializowane do formatu JSON i umieszczane w treści żądania.
• GraphQL API: Do modyfikowania danych (np. tworzenia lub aktualizowania wpisów) Next.js używa mutacji GraphQL, wysyłanych do punktu końcowego GraphQL w Strapi za pomocą żądań HTTP POST.

Skąd pochodzą dane:

• Strapi: Dane są przechowywane w skonfigurowanej bazie danych. Strapi pobiera, przetwarza i udostępnia te dane przez swoje API (RESTful lub GraphQL) w odpowiedzi na żądania HTTP z Next.js.
• Next.js: Next.js samo nie przechowuje danych treści zarządzanych przez Strapi. Pobiera dane przez API Strapi i używa ich do renderowania interfejsu użytkownika. Next.js może tymczasowo cache'ować część danych w celu optymalizacji wydajności, ale źródłem prawdy jest zawsze baza danych Strapi.

Uwierzytelnianie i autoryzacja w tym połączeniu

Do ochrony treści i API Strapi stosuje mechanizmy uwierzytelniania i autoryzacji. Next.js musi się poprawnie uwierzytelnić, żądając chronionych zasobów. 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.

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

• SSG (Static Site Generation): Przy generowaniu statycznym w Next.js dane z API Strapi są pobierane w czasie budowania. Next.js z wyprzedzeniem generuje strony HTML z osadzonymi już danymi. Oznacza to, że gdy użytkownik odwiedza stronę, przeglądarka otrzymuje gotowy HTML, co zapewnia wyjątkowo szybkie ładowanie. Służą do tego funkcje takie jak `getStaticProps`.
• SSR (Server-Side Rendering): Przy renderowaniu po stronie serwera dane z API Strapi są pobierane przy każdym żądaniu użytkownika do serwera Next.js. Next.js renderuje stronę HTML na bieżąco z najnowszymi danymi i wysyła ją do przeglądarki. Zapewnia to aktualną treść, ale może nieco wydłużyć czas odpowiedzi serwera. Służy do tego funkcja `getServerSideProps`.

Podsumowanie

Integracja Strapi i Next.js opiera się na standardowych protokołach sieciowych, takich jak HTTP, i formatach danych, takich jak JSON. Strapi pełni rolę backendu, dostarczając treść przez API RESTful lub GraphQL, z których Next.js korzysta, aby pobierać dane i wyświetlać je w interfejsie użytkownika. Wybór między REST a GraphQL zależy od potrzeb projektu. Next.js może pobierać dane w czasie budowania (SSG) lub przy każdym żądaniu użytkownika (SSR), w zależności od wymagań dotyczących aktualności danych i wydajności.