Headless CMS - SSR jako ważny element działania platformy

Skuteczność i wydajność aplikacji internetowych to klucz do sukcesu każdego biznesu online. Dynamiczne i szybkie strony przyciągają użytkowników, zapewniają wysokiej jakości doświadczenia oraz zwiększają konwersję. Jedną z metod, która pomaga aplikacjom internetowym osiągnąć te cele jest Server-Side Rendering (SSR). Ta technika pozwala na generowanie zawartości stron internetowych po stronie serwera oraz oferuje szereg korzyści zarówno dla użytkowników, jak i deweloperów.

Server-Side Rendering to technika generowania zawartości strony internetowej po stronie serwera. W SSR zarówno JavaScript, jak i HTML, są renderowane na serwerze i przesyłane jako całość do przeglądarki. Dzięki temu zawartość strony jest widoczna nawet przy wyłączonym JavaScript, co między innymi przyspiesza ładowanie stron i ułatwia indeksację przez wyszukiwarki. Technika ta nie tylko zwiększa wydajność, ale również poprawia doświadczenie użytkownika oraz efektywność działań SEO.

W kontekście Headless CMS, SSR zwiększa elastyczność i wydajność aplikacji, umożliwiając lepsze wykorzystanie nowoczesnych technologii frontendowych. W dalszej części artykułu dokładniej przyjrzymy się definicji i zastosowaniom SSR.

Techniczne działanie SSR

W procesie SSR przetwarzanie i generowanie stron internetowych odbywa się na serwerze, przed przesłaniem gotowego kodu HTML do przeglądarki użytkownika. Aby lepiej zrozumieć jak działa SSR, prześledźmy poszczególne etapy tego procesu, począwszy od momentu wysłania zapytania przez przeglądarkę, aż do wyświetlenia gotowej aplikacji po stronie użytkownika.

1. Zapytanie przeglądarki: Przeglądarka użytkownika wysyła zapytanie HTTP do serwera, prosząc o wyświetlenie strony internetowej.

2. Przetwarzanie zapytania: Serwer odbiera zapytanie i rozpoczyna przetwarzanie. Na tym etapie serwer może zbierać niezbędne dane z różnych źródeł, takich jak bazy danych, API czy nawet zwykłe pliki tekstowe w formacie markdown. Dane te obejmują informacje o wyglądzie i układzie menu, treściach dostępnych na stronie oraz użytych komponentach (bloczkach).

3. Renderowanie HTML: Zebrane dane są następnie używane do generowania kodu HTML po stronie serwera. Proces ten może obejmować wykonanie szablonów, integrację z systemami zarządzania treścią (CMS) oraz przetwarzanie JavaScriptu potrzebnego do dynamicznych elementów strony.

4. Wysyłanie odpowiedzi: Gotowy kod HTML jest przesyłany z powrotem do przeglądarki użytkownika. W przeciwieństwie do Client-Side Rendering (CSR), gdzie przeglądarka musi najpierw pobrać i przetworzyć JavaScript, tutaj przeglądarka otrzymuje już w pełni renderowany dokument HTML.

5. Wyświetlanie strony: Przeglądarka wyświetla otrzymany kod HTML, co pozwala na natychmiastowe dostarczenie użytkownikowi zawartości strony. Dzięki temu, nawet jeśli JavaScript jest wyłączony w przeglądarce, podstawowa zawartość strony pozostaje widoczna.

6. Uruchamianie aplikacji: Zaraz po załadowaniu i wyświetleniu kodu HTML, przeglądarka uruchamia aplikację JavaScript, która może dodać interaktywność do strony. JavaScript przejmuje kontrolę nad dynamicznymi elementami, umożliwiając m.in. asynchroniczne ładowanie treści z serwera.

Stack technologiczny
Technologiczny stack przy SSR obejmuje kilka kluczowych narzędzi i frameworków, które współpracują ze sobą, aby zapewnić wydajność i elastyczność aplikacji. W przypadku Vue.js, jednym z popularnych narzędzi jest Vite, nowoczesny i ultraszybki bundler, który znacząco przyspiesza procesy budowania i uruchamiania aplikacji.

Kolejnym frameworkiem używanym przy SSR jest Vike, który oferuje bardzo przejrzyste flow i bogaty wachlarz eventów, na które można wpływać. Umożliwia kontrolę nad zachowaniem aplikacji zarówno po stronie klienta, jak i serwera, oferując również własny system routingu. 

Dzięki temu deweloperzy mogą łatwo zarządzać trasami w aplikacji, co jest kluczowe w kontekście SSR i internacjonalizacji. Vike integruje się bezproblemowo z ekosystemem Vue.js i Vite, co tworzy potężne narzędzie do budowy nowoczesnych, wydajnych aplikacji internetowych z renderowaniem po stronie serwera.

Dlaczego SSR jest ważne?
Server-Side Rendering jest używane głównie w sytuacjach, gdy potrzebne jest szybkie ładowanie stron oraz lepsza indeksacja przez wyszukiwarki internetowe (kluczowe aspekty pod kątem SEO). Jest to szczególnie istotne dla dynamicznych aplikacji internetowych, które często aktualizują swoją zawartość, takich jak serwisy informacyjne, blogi, portale społecznościowe oraz platformy E-commerce. SSR jest również wybierane, gdy aplikacja wymaga zaawansowanej logiki biznesowej, którą lepiej realizować po stronie serwera, np. autoryzacja użytkowników czy personalizacja treści. 

Zalety SSR
Lepsza indeksacja przez boty (poprawa SEO): Ponieważ zawartość strony jest w pełni renderowana po stronie serwera, wyszukiwarki mogą łatwo indeksować stronę, co poprawia jej widoczność w wynikach wyszukiwania.

1. Szybsze ładowanie strony: Użytkownicy otrzymują gotowy HTML, co znacznie skraca czas potrzebny na załadowanie i wyświetlenie strony.

2. Biblioteka reużywalnych komponentów: Możliwość tworzenia i ponownego wykorzystywania komponentów, takich jak hero slider lub bloczek z ostatnimi wpisami na bloga, zwiększa efektywność i spójność aplikacji.

3. Dostarczanie HTML razem z JS: Strona jest dostarczana jako gotowy HTML z osadzonym JavaScriptem, co zapewnia pełną funkcjonalność nawet bez włączonego JavaScriptu w przeglądarce.

4. Wsparcie dla stron SPA (Single Page Application): SSR nie zamyka drogi do wykorzystania Single Page Application. Mimo iż kod HTML generowany jest po stronie serwera, wciąż możemy wykorzystywać wszystkie dobrodziejstwa nowoczesnych aplikacji działających bezpośrednio w przeglądarce.

5. Ukrycie logiki po stronie serwera: Możliwość kontrolowania, która logika jest wykonywana po stronie serwera a która po stronie przeglądarki, co może zwiększyć bezpieczeństwo i kontrolę dostępu do treści.

6. Większe możliwości działania od strony serwerowej: Serwer ma dostęp do wszystkich plików cookie, co umożliwia bardziej zaawansowane operacje niż te dostępne tylko po stronie klienta (HTTP only). Możemy również wysyłać żądania HTTP do dowolnego adresu zewnętrznego, nie martwiąc się o ograniczenia CORS.

7. Możliwość cache’owania wyników renderowania: Serwer może cache’ować wyniki renderowania, co przyspiesza kolejne zapytania, zmniejszając obciążenie serwera i poprawiając wydajność.

Wady SSR

1. Wolniejsza reakcja na interakcje użytkownika: Każda interakcja wymaga kontaktu z serwerem, co może nieco opóźniać reakcje w porównaniu do aplikacji renderowanych po stronie klienta.

2. Wysoki próg wejścia: Technologia SSR wymaga zaawansowanej obsługi API. Jeśli skrypt napotka błąd po stronie serwera, będzie on widoczny w logach serwera a użytkownika otrzyma błąd HTTP 500, co wymaga od frontendowców zwrócenia uwagi na backend.

3. Trudniejsze uruchomienie na serwerach typu shared hosting: Konfiguracja i uruchomienie SSR może być bardziej skomplikowane niż w przypadku standardowych aplikacji webowych. W tym przypadku konieczne jest uruchomienie aplikacji pełniącej funkcję serwera HTTP oraz skonfigurowania ReverseProxy na odpowiedni port. W większości usług typu SharedHosting takie opcje są niedostępne dla klientów. Można wtedy skorzystać z rozwiązań chmurowych takich jak np. Netlify.

4. Trudniejsze debugowanie: W SSR debugowanie jest bardziej skomplikowane, ponieważ problemy mogą wynikać zarówno z generowania treści po stronie serwera, jak i z tego, jak frontend interpretuje te dane. Często wymaga to sprawdzania logów serwera i weryfikacji spójności danych pomiędzy częścią serwerową i kliencką.

5. Hydration mismatch: Proces "hydration" zakłada, że wygenerowana zawartość na serwerze będzie identyczna z treściami uruchomionymi w przeglądarce. Różnice między tymi środowiskami mogą prowadzić do błędów i problemów z synchronizacją.

SSR oferuje liczne korzyści, ale wymaga także odpowiedniego zrozumienia i umiejętności, aby skutecznie z niego korzystać.

Wspólne elementy w projektach

Projekty wykorzystujące Server-Side Rendering często posiadają pewne wspólne elementy, które pomagają w efektywnym zarządzaniu i renderowaniu treści. Oto najważniejsze z nich:

Menu

Menu w projektach SSR jest kluczowym elementem, który musi być dynamicznie pozyskiwany i renderowany. Zwykle serwer wysyła zapytanie do odpowiedniego API, aby pobrać strukturę menu, a następnie generuje odpowiedni kod HTML, który zostaje przesłany do przeglądarki. Dzięki temu użytkownicy widzą zawsze aktualne menu, niezależnie od ich preferencji językowych czy lokalizacji.

Breadcrumbs

Breadcrumbs, czyli "okruszki nawigacyjne", pomagają użytkownikom w orientacji na stronie. Generowanie breadcrumbsów może być o tyle problematyczne, że nie wszystkie serwisy API pozwalają na ich proste wygenerowanie. Niekiedy wymaga to wysyłania dodatkowych zapytań do API, co oczywiście negatywnie wpływa na czas generowania po stronie serwera. W takich przypadkach warto wdrożyć automatyczne skrypty, które wyznaczają ścieżkę okruszków dla każdej strony i przechowują ją w pamięci podręcznej.

Internacjonalizacja

Internacjonalizacja jest kluczowym elementem w projektach międzynarodowych. Wymaga to specjalnych zapytań do API, aby obsłużyć różne wersje językowe. Każda wersja językowa strony może mieć inny URL, ale prowadzić do tych samych komponentów. To wymaga od serwera, aby odpowiednio przetwarzał i zwracał treści w odpowiednim języku.

Renderer

Renderer w projektach SSR otrzymuje tablicę obiektów z danymi, które muszą być po kolei wygenerowane. Proces ten obejmuje rozpoznawanie, czy dany komponent jest zarejestrowany w aplikacji, jego anonimowe montowanie i wstrzykiwanie danych. Dążymy do tego, żeby renderer wykorzystywać w ten sam sposób, aby nie tworzyć nadmiernie customowych widoków i utrzymać spójność aplikacji.

Router

Router jest szczególnie ważny w kontekście internacjonalizacji. Różne wersje językowe mają inne adresy URL, ale prowadzą do tych samych komponentów (np. "Contact us" = "Kontakt"). Trzeba to uwzględnić w ustawieniach routera, gdzie ścieżki są definiowane, aby poprawnie przekierowywać użytkowników na odpowiednią wersję strony.

API

Metody połączenia z API różnią się diametralnie w zależności od wybranego w projekcie content managera,  Niezależnie od systemu zarządzania treścią oraz standardu komunikacji (RestAPI, GraphQL, pliki tekstowe), struktura danych w komponentach powinna być identyczna, aby zachować reużywalność bloków. Wymaga zapewniania dodatkowych warstwy translacji pomiędzy API CMSa a API komponentów, ale na końcu otrzymujemy projekt, który stosunkowo łatwo zmigrować do innych systemów. Bloki możemy wykorzystać w innych projektach i dostarczać kolejne produkty szybciej. 

Czy SSR jest konieczne przy podejściu Headless?

Server-Side Rendering nie zawsze jest konieczne przy podejściu headless. SSR najlepiej sprawdza się przy dynamicznych treściach, które często się zmieniają i wymagają częstych publikacji. Dzięki SSR, strona może być renderowana na serwerze za każdym razem, gdy użytkownik ją odwiedza, co pozwala na wyświetlanie najbardziej aktualnych danych. Jest to szczególnie istotne dla stron o dużym natężeniu ruchu, gdzie użytkownicy oczekują, że dane będą zawsze świeże i zaktualizowane w czasie rzeczywistym. 

Jednakże, implementacja SSR może być skomplikowana i wymaga zaawansowanego zarządzania zasobami serwera. Dla wielu projektów alternatywą może być Static Site Generation (SSG), które oferuje nieco inne zalety i jest często łatwiejsze w implementacji.

„Z perspektywy SEO, kluczowe jest dostarczenie poprawnie wyrenderowanych treści zarówno użytkownikom, jak i robotom wyszukiwarek, niezależnie od użytej technologii. Ważne jest również, aby serwis ładował się szybko i sprawnie. W przypadku Headless CMS, Server-Side Rendering (SSR) jest świetnym rozwiązaniem, ponieważ przyspiesza ładowanie podstron i zapewnia pełną kontrolę nad prezentowanymi treściami, co gwarantuje poprawne indeksowanie oraz eliminuje potencjalne problemy związane z renderowaniem JavaScript. Należy jedynie zadbać, aby nie obciążyło zanadto serwera.” - mówi Adam Halbersztadt Specjalista SEO w Salestube

Czym jest Static Site Generation?

Static Site Generation (SSG) to technika, która generuje statyczne pliki HTML na podstawie wszystkich dostępnych adresów URL w systemie. Proces ten odbywa się przed wdrożeniem strony na serwer, co oznacza, że cały zestaw plików HTML jest gotowy do załadowania, bez potrzeby uruchamiania serwera NodeJS.

Zalety SSG

SSG jest prostsze w implementacji i wdrożeniu, ponieważ nie wymaga uruchamiania serwera NodeJS. Statyczne pliki HTML ładują się bardzo szybko, co poprawia doświadczenie użytkownika i korzystnie wpływa na SEO. Dodatkowo, statyczne strony są mniej podatne na ataki, ponieważ nie mają dynamicznej warstwy serwerowej, która mogłaby być celem.

Wady SSG

Jednak SSG ma swoje ograniczenia. Aktualizacja treści wymaga na ogół ponownego wygenerowania i wdrożenia całego zestawu plików HTML, co może być czasochłonne, zwłaszcza w przypadku dużej ilości treści. SSG nie sprawdza się dobrze w przypadku bardzo dynamicznych treści, które często są aktualizowane. W takich przypadkach SSR może być lepszym rozwiązaniem. Istnieją implementację, gdzie generuje się jedynie wybraną kolekcję podstron jednakże powstaje wtedy ryzyko braku spójności danych, jeśli wygenerowane strony posiadają zewnętrzne relację do innych treści, których nie jest łatwo wyśledzić. Najpewniejszą metodą jest regeneracja wszystkiego.

SSG jest świetnym rozwiązaniem dla mniejszych stron z bardziej statyczną treścią, gdzie zmiany są rzadsze, a czas wdrożenia nie jest krytyczny. Wybór między SSR a SSG zależy od specyficznych potrzeb projektu, charakterystyki treści i wymagań wydajnościowych.

Przykładowe wdrożenia SSR przez Salestube

Alokai - projekt oparty na Contentstack

W projekcie Alokai zbudowanym na platformie Contentstack, wykorzystaliśmy SSR, aby zoptymalizować ładowanie stron. Dzięki temu wystarczy jeden request na stronę, aby załadować wszystkie niezbędne elementy. W odpowiedzi (response) od razu otrzymujemy informacje o strukturze menu, stopce (footer) oraz treści znajdującej się na danej stronie. Taki sposób działania znacząco przyspiesza ładowanie stron i poprawia doświadczenie użytkownika.

Nasza strona Salestube - projekt oparty na Storyblok

W projekcie strony www Salestube, opartym na Storyblok, proces ładowania jej wymagał nieco innego podejścia. Pomimo wysłania jednego requestu o stronę, konieczne było wysłanie dodatkowego zapytania, aby uzyskać pełne dane. Na szczęście infrastruktura Storyblok jest na tyle wydajna, że nie wymagała dodatkowej warstwy cache’owania, aby zapewnić zadowalające czasy ładowania. Dzięki temu udało się utrzymać wysoką wydajność i szybkość działania strony, mimo konieczności wykonywania dodatkowych zapytań.

myERP.pl - projekt oparty na WordPress

W projekcie myERP.pl zbudowanym na platformie WordPress z wykorzystaniem WPGraphQL, musimy najpierw odpytać o stronę z treścią, po czym otrzymujemy tablicę obiektów zawierających wartości z nierozwiązanymi asocjacjami. Na przykład, jeśli chcemy uzyskać polecane posty z bloga, otrzymujemy numery tych postów i wykonujemy kolejny request, aby uzyskać pełne obiekty tych postów, takie jak obraz, tytuł czy opis (description). Następnie wykonujemy kolejne zapytania o menu, języki oraz stopkę (footer). Jeden request zbiera ustawienia strony z kilku miejsc, co może wydłużać czas przetwarzania. 

Rozwiązaliśmy to korzystając z GraphQL, który umożliwia pobieranie wielu różnych treści w jednym zapytaniu. Wdrożyliśmy także podwójną warstwę cachowania: Full Page Cache, przechowującą cały wygenerowany HTML do czasu aktualizacji, oraz dodatkowe cache na etapie zapytań GraphQL. Wszystko jest przechowywane w szybkiej bazie danych Redis. Takie rozwiązanie możliwe jest tylko dzięki SSR – po stronie klienta nie byłoby to wykonalne w tej formie.

Alternatywy podejścia SSR

Istnieje wiele frameworków i narzędzi, które oferują alternatywne podejścia do Server-Side Rendering (SSR) lub łączą różne techniki renderowania, aby zoptymalizować wydajność i doświadczenie użytkownika. Oto kilka popularnych opcji:

• Next.js - Next.js to framework oparty na React, który umożliwia łatwe wdrożenie SSR, jak również Static Site Generation (SSG) i incremental static regeneration (ISR). Jest szczególnie popularny wśród deweloperów React, dzięki swojej elastyczności i wsparciu dla najnowszych technologii webowych.

• Nuxt.js - Nuxt.js to framework bazujący na Vue.js, który oferuje podobne funkcje do Next.js. Umożliwia renderowanie po stronie serwera, generowanie statycznych stron oraz tworzenie aplikacji typu Single Page Application (SPA). Jest to doskonały wybór dla projektów korzystających z Vue.js.

• SvelteKit - SvelteKit to nowoczesny framework oparty na Svelte, który wspiera SSR, SSG oraz hybrydowe podejścia do renderowania. Dzięki swojej wydajności i prostocie, SvelteKit staje się coraz bardziej popularny wśród deweloperów poszukujących nowoczesnych rozwiązań.

• Gatsby - Gatsby to framework oparty na React, który koncentruje się na generowaniu statycznych stron (SSG). Jest idealny dla stron z zawartością, która rzadko się zmienia, ale może być również stosowany w połączeniu z dynamicznymi źródłami danych, dzięki swojej elastycznej architekturze i bogatemu ekosystemowi wtyczek.

• Universal (Angular Universal) - Angular Universal to rozszerzenie dla Angular, które umożliwia SSR. Dzięki niemu, aplikacje Angular mogą korzystać z renderowania po stronie serwera, co poprawia SEO i czas ładowania stron. Jest to naturalny wybór dla projektów opartych na Angular.

„Można odnieść wrażenie, że tak szeroki wybór technologii wiąże się z koniecznością indywidualnego podejścia do każdej z nich i każdorazowego wdrażania zespołu, co wymaga dodatkowych zasobów. To po części prawda - choćby dlatego, że różne CMSy mogą mieć specyficzne cechy, korzystne na jednym polu, ale za cenę pewnych ograniczeń. Udało się nam jednak na bazie dotychczasowych doświadczeń uzyskać spójne podejście niezależne od wybranego systemu. Dzięki temu praca nad kolejnymi projektami jest szybsza, sprawniejsza, a deweloperzy mogą doskonalić swoje umiejętności w wypracowanym przez nas stacku technologicznym.” - mówi Justyna Leśnikowska Tech Lead frontend developer w Salestube powered by hmmh

Podsumowanie spojrzenia na SSR

Server-Side Rendering (SSR) to efektywna technika generowania stron internetowych, która optymalizuje szybkość ładowania, poprawia indeksację przez wyszukiwarki i zapewnia lepsze doświadczenie użytkownika. 

Najważniejsze informacje, o których warto pamiętać to:

• SSR dla dynamicznych aplikacji: Między innymi zapewnia szybkie ładowanie stron i lepszą indeksację.

• Elastyczność technologiczna: Narzędzia takie jak Next.js, Nuxt.js czy SvelteKit pozwalają dostosować podejście do wymagań projektu.

• SSG jako alternatywa: Oferuje prostotę wdrożenia i szybsze czasy ładowania dla statycznych treści.

SSR i SSG oferują szerokie możliwości, umożliwiając tworzenie wydajnych, nowoczesnych aplikacji internetowych dostosowanych do różnych potrzeb.

Mierzysz się z wyzwaniami w zakresie wdrożenia headless CMS lub headless E-commerce? Skontaktuj się z nami, aby porozmawiać o możliwościach współpracy.