2. Podstawowy podział na warstwy: frontend i backend

2.4. SSR – Server Side Rendering

Renderowanie po stronie serwera polega na tym, że cały HTML, CSS i (częściowo) JavaScript są generowane na serwerze, zanim strona trafi do przeglądarki użytkownika. Gdy użytkownik otwiera stronę, serwer przygotowuje już w pełni wyrenderowany kod HTML, który następnie jest przesyłany do przeglądarki.

Jak to działa:

  1. Przeglądarka internetowa wysyła zapytanie do serwera, np. wpisując adres URL strony.
  2. Serwer przetwarza żądanie, wykonuje niezbędne operacje (np. pobiera dane z bazy) i generuje gotowy HTML.
  3. Serwer wysyła ten HTML do przeglądarki.
  4. Użytkownik od razu widzi stronę (nawet jeśli niektóre interaktywne elementy mogą być ładowane później poprzez JavaScript).

Przykłady technologii wykorzystujących SSR:

  • PHP, Ruby on Rails, Django (frameworki backendowe z renderowaniem HTML na serwerze),
  • Next.js (framework do SSR dla Reacta),
  • Nuxt.js (SSR dla Vue.js).

Zalety SSR:

  • Szybsze renderowanie początkowe: HTML jest gotowy już na etapie serwera, więc użytkownik widzi treść strony szybciej.
  • SEO: Ponieważ wyszukiwarki, takie jak Google, mogą łatwiej indeksować strony z pełnym HTML-em, SSR jest korzystniejszy pod kątem optymalizacji dla wyszukiwarek (SEO).
  • Lepsza wydajność dla słabszych urządzeń: Rendering odbywa się na serwerze, więc nawet użytkownicy na wolniejszych urządzeniach mogą szybko zobaczyć stronę.

Wady SSR:

  • Obciążenie serwera: Serwer musi renderować HTML dla każdego zapytania, co może być kosztowne pod względem zasobów, zwłaszcza przy dużym ruchu.
  • Dłuższe czasy odpowiedzi na dynamiczne treści: Serwer musi każdorazowo generować nową stronę, co może wydłużać czas odpowiedzi przy bardzo dynamicznych aplikacjach.