Podręcznik

2.5. CSR – Client Side Rendering

Renderowanie po stronie klienta (przeglądarki) w podstawowym ujęciu polega na tym, że serwer wysyła do klienta minimalny szablon HTML oraz kod JavaScript i CSS. JavaScript odpowiada za dynamiczne generowanie treści po stronie przeglądarki internetowej. Po załadowaniu strony przeglądarka w osobnych żądaniach HTTP pobiera dane (np. przez API) i na ich podstawie renderuje widok. Istotną różnicą w stosunku do SSR jest „składanie” elementów HTML w docelowy dokument w przeglądarce, a nie na serwerze.

Popularne frameworki React, Vue.js, Angular pracują w trybie CSR i pozwalają budować aplikacje w stylu SPA (ang. Single-Page Application), czy z dynamicznym ładowaniem zawartości po stronie klienta.

Zalety CSR:

• Lepsza interaktywność: Aplikacje renderowane po stronie klienta mogą być bardzo dynamiczne i interaktywne (typowe dla aplikacji jednostronowych, czyli SPA), z płynnymi przejściami między widokami.
• Mniejsze obciążenie serwera: Serwer nie musi generować pełnych stron HTML, a jedynie odpowiadać na żądania API, co zmniejsza obciążenie.
• Płynniejsze wrażenia dla użytkownika: Po załadowaniu strony dalsze przejścia między stronami (widokami) są szybsze, ponieważ wszystko jest już załadowane i przetwarzane lokalnie w przeglądarce.

Wady CSR:

• Wolniejsze renderowanie początkowe: Użytkownik może zobaczyć "pustą" stronę (szablon) ekran ładowania aplikacji zanim JavaScript pobierze i wyrenderuje treść.
• SEO: Ponieważ HTML generowany jest dynamicznie w przeglądarce, tradycyjne roboty wyszukiwarek mogą mieć problem z indeksowaniem treści, chyba że zostanie użyty specjalny mechanizm (np. prerendering).
• Obciążenie przeglądarki: Więcej zasobów przetwarzania przeniesione jest na przeglądarkę, co może powodować wolniejsze działanie na starszych lub słabszych urządzeniach.