CSR (renderowanie po stronie klienta)
Przeglądarka buduje stronę z JavaScriptu.
CSR (renderowanie po stronie klienta) w 30 sekund
- 01 · Zrozum: CSR (Client-Side Rendering) to model, w którym serwer wysyła niemal pustą stronę z dołączonym JavaScriptem, a cała treść powstaje dopiero w przeglądarce użytkownika.
- 02 · Sprawdź: Porównaj „źródło strony” (surowy HTML) z widokiem po renderowaniu.
- 03 · Unikaj: Cała treść i linki tylko w JavaScript
Co to jest CSR (renderowanie po stronie klienta)?
CSR (Client-Side Rendering) to model, w którym serwer wysyła niemal pustą stronę z dołączonym JavaScriptem, a cała treść powstaje dopiero w przeglądarce użytkownika. Framework (np. React) buduje widok po pobraniu i wykonaniu skryptów.
Daje to płynne, „aplikacyjne” działanie po załadowaniu, ale pierwszy render zależy od pobrania i wykonania JS — a robot lub podgląd linku, który tego nie zrobi, zobaczy pustą stronę.
Dlaczego to ważne dla SEO
Strona oparta wyłącznie na CSR ryzykuje słabą indeksację i puste podglądy w mediach społecznościowych. Dla treści ważnej dla SEO lepszy jest SSR, SSG lub prerendering.
Jak to sprawdzić
Porównaj „źródło strony” (surowy HTML) z widokiem po renderowaniu. Jeśli w surowym HTML nie ma treści, masz CSR. SEOMaster wykrywa treść dostępną dopiero po JS.
Częste błędy
- Cała treść i linki tylko w JavaScript
- Brak prerenderingu dla robotów i podglądów
- Długie ładowanie JS psujące pierwsze wrażenie i LCP
Przykład
Serwer → pusty <div id="root"></div> → JS dorysowuje treść
Najczęstsze pytania
Czy Google indeksuje strony renderowane w przeglądarce?
Tak, ale w dwóch etapach: najpierw czyta surowy HTML, a renderowanie odkłada na później. Przy dużych serwisach potrafi to oznaczać dni opóźnienia albo pominięcie części treści.
Jak sprawdzić, co widzi robot?
Narzędzie do sprawdzania adresu URL w Search Console pokazuje wyrenderowany kod. Szybszy test to podejrzenie źródła strony: jeśli w surowym HTML nie ma treści, robot też jej najpierw nie zobaczy.
Kiedy CSR jest w porządku?
Dla paneli po zalogowaniu, konfiguratorów i aplikacji, które i tak nie mają być indeksowane. Problem zaczyna się przy treści, która ma zbierać ruch z wyszukiwarki.
Poradniki na ten temat
- Czy strona jest gotowa na wyszukiwarki i agentów AI — Gotowość dla AI nie polega na dodaniu jednego pliku. Najpierw treść musi być publiczna, dostępna w HTML, możliwa do pobrania i jednoznacznie opisana. llms.txt może pomóc agentom, ale nie zastępuje tych podstaw.
- SSR, SSG czy CSR — którą strategię renderowania wybrać — Wybór między renderowaniem na serwerze, budowaniem statycznym a renderowaniem w przeglądarce sprowadza się do jednego pytania: jak szybko treść musi być świeża i jak pewnie ma być indeksowana.