Nie ma wątpliwości, że na doświadczenie użytkownika na stronie wpływa odczuwalny czas ładowania. Przy dzisiejszych, cięższych front-endach, renderowanie po stronie klienta nie wydaje się zbyt szybkie. Jakie są różnice w wydajności pomiędzy CSR (Client Side Rendering), a SSR (Server Side Rendering)? W tym artykule porównam, czym różni się renderowanie po stronie klienta (CSR), a renderowanie po stronie serwera (SSR).
Czym jest Server-Side Rendering?
Server Side Rendering (SSR) umożliwia generowanie całych plików HTML na serwerze i dostarczanie ich w postaci pełnej strony w HTML i CSS dla użytkownika. Przeglądarka internetowa wysyła żądanie informacji z serwera, który natychmiast odpowiada wysyłając w pełni wyrenderowaną stronę.
Starsze rozwiązania Server Side Rendering, np. stronę stworzoną w języku PHP, serwer potrafił szybko skompilować, połączyć dane i dostarczyć pełną wersję HTML użytkownikowi. Jednak z czasem stawało się to coraz bardziej uciążliwe, ponieważ odwiedzając każdą stronę z osobna, serwer musiał za każdym razem pobierać pliki i przygotowywać pełną wersję strony w HTML i CSS do wyświetlenia. Strony z czasem stawały się coraz “cięższe”, a internet po stronie użytkownika nadal jest słabszy, niż po stronie serwera.
Odkąd Google może “czytać” kod JavaScript i korzystanie z niego jest przyjazne SEO, to możemy wykorzystać technologię JS np. React i Server Side Rendering, aby uzyskać o wiele lepsze doświadczenie użytkownika na stronie. Server Side Rendering może być używany do pobierania danych i wstępnego wypełniania strony niestandardową zawartością wykorzystując niezawodne połączenie z siecią serwera.
Przykłady frameworków JavaScript korzystających z renderowania po stronie serwera to: Angular server side rendering, Gatsby server side rendering, Google server side rendering, NestJS server side rendering, React server side rendering oraz Vue server side rendering.
Czym jest Client Side Rendering?
W Client Side Rendering, zamiast otrzymywać całą zawartość strony z dokumentu HTML, zawartość jest renderowana w przeglądarce za pomocą biblioteki JavaScript po stronie klienta. Przeglądarka nie wykonuje dodatkowych żądań do serwera, kiedy strona jest ładowana.
Podczas renderowania po stronie klienta, przekierowujesz żądanie do pojedynczego pliku HTML, a serwer dostarcza go bez żadnej zawartości (lub z ekranem ładowania), dopóki nie pobierzesz całego JavaScriptu i pozwolisz przeglądarce “obrobić” wszystko przed pokazaniem zawartości.
Client Side Rendering to metoda renderowania, która opiera się na wykonywaniu kodu JavaScript po stronie klienta (przeglądarki) poprzez framework JavaScript. Klient najpierw żąda kodu źródłowego, który będzie zawierał niewielką ilość indeksowalnego HTML. Następnie drugie żądanie zostanie wykonane dla plików .js, które zawierają cały HTML w postaci kodu JavaScript.
Różnice: Server Side Rendering i Client Side Rendering
Server Side Rendering jest użyteczny dla statycznych stron internetowych oraz początkowe ładowanie strony w SSR jest szybsze. Z drugiej strony, Client Side Rendeing jest działa szybciej przy początkowym ładowaniu strony oraz posiada duży wybór bibliotek JavaScript.
Wadą Server Side Rendering jest przeładowywanie całej zawartości strony i ogólnie wolniejsze renderowanie strony. Natomiast w Client Side Rendering, początkowe ładowanie strony, może wymagać więcej czasu i w większości przypadków wymaga zewnętrznych bibliotek.
Podsumowując, aby uzyskać lepszy wynik SEO, łatwiejszą optymalizację pod kątem mediów społecznościowych oraz szybsze renderowanie treści, powinieneś pomyśleć o Serwer Side Renderingu.
