Czym jest renderowanie po stronie serwera (SSR)?

Renderowanie po stronie serwera (SSR) to proces, w którym strona internetowa jest generowana na serwerze w odpowiedzi na żądanie klienta. Zamiast wysyłać klientowi pusty dokument HTML i pakiet JavaScript do późniejszego renderowania w przeglądarce, serwer tworzy pełny dokument HTML z już wstawioną zawartością.

Zalety SSR:

• Optymalizacja SEO: Roboty wyszukiwarek łatwiej indeksują treść, ponieważ otrzymują gotowy HTML, a nie dynamicznie generowany JavaScript.
• Czas pierwszego malowania (FCP): Użytkownik szybciej widzi zawartość strony, ponieważ serwer już dostarczył gotowy HTML, który przeglądarka może od razu wyświetlić.
• Wydajność na słabych urządzeniach: Mniej obciążenia dla urządzenia klienta, ponieważ główna praca nad generowaniem strony jest wykonywana na serwerze.
• Lepsza interakcja w mediach społecznościowych: Podczas udostępniania, media społecznościowe otrzymują gotową zawartość do podglądu, a nie pustą stronę.

Wady SSR:

• Zwiększenie obciążenia serwera: Serwer musi obsługiwać żądania renderowania każdej strony, co może być kosztowne pod względem zasobów.
• Zmniejszenie interaktywności do czasu hydratacji: Po otrzymaniu HTML, przeglądarka potrzebuje czasu na "hydratację" — powiązanie logiki JavaScript z już wyświetlonym DOM. Do czasu zakończenia hydratacji, strona może być częściowo lub całkowicie nieinteraktywna.
• Skomplikowana deweloperka: Wymaga określonej architektury aplikacji i specjalnych frameworków (np. Next.js dla React, Nuxt.js dla Vue.js, Angular Universal dla Angular).

Przy SSR, klient wysyła żądanie do serwera, który je obsługuje, generuje łańcuch HTML zawierający gotową zawartość i strukturę, i odsyła go z powrotem do klienta. Przeglądarka wyświetla otrzymany HTML, a następnie ładuje i wykonuje JavaScript klienta, aby dodać interaktywność (proces hydratacji).