SSR (Server-Side Rendering) to technika, w której gotowy HTML strony powstaje na serwerze, a nie w przeglądarce użytkownika. Serwer odbiera żądanie, pobiera potrzebne dane, składa kompletny dokument HTML i odsyła go do klienta. Przeglądarka dostaje więc treść, którą może od razu pokazać — bez czekania, aż pobierze i uruchomi spory plik JavaScript. To przeciwieństwo klasycznego Client-Side Rendering (CSR), gdzie serwer wysyła niemal pustą stronę, a całą zawartość dorysowuje JS już u użytkownika.
Jak to działa i po co
Przy SSR każde wejście na adres uruchamia po stronie serwera kod, który generuje HTML pod konkretne zapytanie. Dzięki temu dostajesz lepszy FCP (First Contentful Paint) — coś pojawia się na ekranie szybciej, bo nie blokuje tego pobieranie i parsowanie bundla. Zyskuje też SEO: roboty wyszukiwarek i crawlery (np. podgląd linków na Facebooku czy Slacku) widzą pełną treść w odpowiedzi, zamiast pustego Po dostarczeniu HTML zwykle następuje hydration — JavaScript „ożywia” statyczny markup, podpinając event listenery, żeby strona stała się interaktywna. Do tego momentu użytkownik widzi treść, ale klikanie jeszcze nie działa. Najpopularniejszy dziś przykład to Next.js (React). Odpalasz projekt przez SSR nie jest darmowy. Każde żądanie obciąża serwer (CPU + pamięć), więc przy dużym ruchu potrzebujesz cache’owania albo mocniejszej infrastruktury. Częsty mit: „SSR = szybciej zawsze”. Niekoniecznie — TTFB bywa wyższy, bo serwer musi najpierw złożyć stronę. Druga pułapka to kod zależny od przeglądarki: odwołanie do CSR (Client-Side Rendering), SSG (Static Site Generation), ISR (Incremental Static Regeneration), hydration, TTFB, FCP, Next.js, Nuxt, React Server Components.Przykład z praktyki
npx create-next-app, a komponenty w katalogu app/ domyślnie renderują się na serwerze (Server Components). Produkcyjnie uruchamiasz to przez next build i next start. W świecie Vue analogiem jest Nuxt, a w Svelte — SvelteKit. Wszystkie pozwalają mieszać SSR ze statycznym generowaniem.Na co uważać
window czy document wysypie się na serwerze, bo tam ich nie ma. I pamiętaj, że hydration potrafi być kosztowny — sam HTML przyszedł szybko, ale interfejs „zamarza”, dopóki JS się nie wczyta.Pojęcia powiązane