Renderowanie

Renderowanie w szerokim znaczeniu

Termin „renderowanie” ma szerokie znaczenie. W tym najbardziej ogólnym oznacz proces generowania zarówno fotorealistycznego jak i niefotorealistycznego obrazu 2D lub 3D za pomocą programu komputerowego. Plik danej „sceny” zawiera ściśle określone informacje na temat żądanego modelu: geometrię, punkt widzenia, tekstury, oświetlenie i cieniowanie. Przykładem takiego rodzaju renderowania jest rotoskoping, w którym, nietypowo, punktem wyjścia, przynajmniej częściowo, jest już gotowy obraz (metodą rotoskopingu posługiwali się m.in. twórcy gry Prince of Persia z 2008 r. oraz filmu Przez ciemne zwierciadło z 2006 r.).

W sieci renderowania. Renderowanie w sieci

Renderowanie w Internecie opiera się na prostej zasadzie: pobraniu danych i przekształceniu kodu źródłowego w zaplanowaną wcześniej wizualizację, czyli stronę internetową. Renderowanie umożliwia – zgodnie z przedstawioną powyżej szerszą definicją – przedstawienie elementów graficznych lub interaktywnych zrealizowanych w językach HTML, CSS i JavaScript. To kluczowy element w interakcji serwera z użytkownikiem, dodatkowo umożliwiający poprawną pracę robotów wyszukiwarek internetowych. Proces renderowania prebiega następująco:

– pobieranie danych do renderowania,

– przetwarzanie i kompilacja,

– wyświetlanie efektu rednerowania.

Dlaczego renderowanie jest tak istotne?

Renderowanie ma bardzo duży wpływ na doświadczenie użytkownika (UX), ponieważ wpływa na responsywność i płynność działania witryny na końcowym urządzeniu. Tak samo istotne jest w przypadku wyświetlania dynamicznej zawartości oraz dostosowywaniu strony do konkretnej wyszukiwarki i dominujących obecnie urządzeń mobilnych. To ostatnie m.in. ma wpływ na poprawną indeksację witryny przez roboty Google’a.

Rodzaje technologii renderowania

Wraz z rozwojem internetu zmienia się także sposób renderowania stron. Można go jednak zasadniczo podzielić na dwa rodzaje, zależnie od miejsca, w którym przeprowadzany jest opisywany proces.

SSR, czyli server-side rendering

Najstarszy sposób renderowania – bo sprawdzający się dobrze w przypadku wyświetlania treści statycznych – stron internetowych, odbywających się na serwerze. W tej sytuacji przeglądarka otrzymuje już wyrenderowany kod HTML. Dobrze wpływa to na czas ładowania strony pozbawionej wielu elementów graficznych.

CSR, czyli client-server rendering

Renderowanie (najpierw HTML, CSS, a potem JavaScript) wykonywane jest przez silnik przeglądarki na podstawie danych wysłanych przez serwer. Zaletą tego typu renderowania jest dynamiczna aktualizacja treści bez konieczności przeładowywania całej strony.

Renderowanie na „osi czasu”

Na renderowanie można też spojrzeć jako proces odbywający się etapami w określonym czasie: progresywny, statyczny i dynamiczny.

Progressive rendering

Sekwencyjne wyświetlanie strony oznacza, iż wybranym elementom do wyświetlenia, przydzielony jest określony priorytet wyświetlania (niski lub wysoki). Dzięki temu można zoptymalizować czas ładowania strony i poprawić UX.

Static Site Generation (SSG)

W tym przypadku zawartość strony wysyłana jest w postaci statycznych plików HTML (struktura strony jest już gotowa przed jej wyświetleniem, co sprawia, że ładuje się błyskawicznie). To bardzo dobre rozwiązanie dla witryn niewymagających zaawansowanych funkcji interaktywnych. Strony takie są również bezpiecznie, gdyż z oczywistych względów nie korzystają z baz danych.

Renderowanie dynamiczne jako rozwiązanie tymczasowe

W tym przypadku tymczasowość ma znaczenie dosłowne. Renderowanie dynamiczne jest tu formą – by zacytować dokumentację Google – „obejścia problemu” nieprawidłowego wyświetlania kodu HTML bądź ignorowania JavaScript (wykrywając takiego bota, serwer renderowania dynamicznego, wyświetla użytkownikowi wersję bez JavaScript poprzez CSR).

Renderowanie – najczęściej zadawane pytania