CSR (Client-Side Rendering) to model renderowania strony w przeglądarce użytkownika. Serwer wysyła niemal pusty plik HTML (często z jednym ) plus paczkę JavaScriptu. Dopiero ten JS pobiera dane, buduje DOM i wstrzykuje treść — czyli to, co widzisz na ekranie, składa się u Ciebie, nie na serwerze.
Jak to działa i do czego służy
Przeglądarka ściąga HTML, potem pobiera i wykonuje bundle JS. Framework (np. React, Vue, Angular) montuje aplikację, odpytuje API o dane, a następnie maluje interfejs. Do pierwszego renderu użytkownik patrzy na biały ekran albo spinner — stąd zwykle gorszy First Contentful Paint i Largest Contentful Paint niż przy renderze serwerowym.
Zaletą jest odciążenie serwera: po wstępnym załadowaniu kolejne przejścia między widokami dzieją się bez przeładowania całej strony (zmienia się tylko fragment DOM-u). To naturalny wybór dla rozbudowanych aplikacji, gdzie liczy się płynna interakcja, a nie indeksacja każdej podstrony — paneli administracyjnych, dashboardów, edytorów, narzędzi za logowaniem.
Przykład z praktyki
Klasyczne CSR dostajesz od ręki, gdy odpalisz SSR (Server-Side Rendering), SSG (Static Site Generation), hydration, SPA, Virtual DOM, time to interactive, Core Web Vitals.npm create vite@latest moja-apka -- --template react. Po npm run dev wchodzisz na localhost:5173 i w źródle strony (Ctrl+U) widzisz niemal pusty z jednym Częste błędy i mity
Pojęcia powiązane