Renderowanie to proces tworzenia kodu potrzebnego do stworzenia strony, z której użytkownicy mogą korzystać w przeglądarce. Obejmuje to przygotowanie treści, stosowanie logiki i przetwarzanie oraz umieszczanie elementów interfejsu i innych elementów niezbędnych do wyświetlenia ostatecznej strony. Aplikacje oparte na treści kładą nacisk na szybkie wczytywanie, krótkie czasy oczekiwania i krótkie czasy renderowania.
Renderowanie po stronie serwera (SSR)
Renderowanie po stronie serwera (SSR) obejmuje renderowanie stron internetowych na serwerze, a następnie wysłanie w całości wyrenderowanego kodu HTML do przeglądarki klienta, zamiast renderowania ich po stronie klienta za pomocą JavaScriptu. Gdy użytkownik uzyskuje dostęp do aplikacji, jego przeglądarka wysyła żądanie do serwera. Aplikacja przetwarza żądanie na serwerze, co obejmuje zbieranie danych z baz danych lub zewnętrznych interfejsów API, a potem renderuje kod HTML żądanej strony. Serwer wysyła w pełni wyrenderowany kod HTML strony z powrotem do przeglądarki użytkownika. Gdy przeglądarka użytkownika otrzyma kod HTML, wczyta wszystkie wymagane pliki JavaScript.
Dowiedz się więcej o języku HTML na web.dev
Zalety korzystania z SSR to między innymi szybki, początkowy wczytywanie, dobra optymalizacja pod kątem wyszukiwarek (SEO), niezawodność i ogólne wrażenia użytkownika. Jednak wdrożenie SSR może być trudniejsze niż renderowanie po stronie klienta ze względu na wymagania związane z wydajnością i umiejętności rozwojowe niezbędne do tworzenia i obsługi aplikacji obsługujących SSR. SSR jest szczególnie przydatne w przypadku aplikacji internetowych opartych na treści, platform e-commerce oraz wszystkich aplikacji wymagających dobrej skuteczności SEO i szybkich reakcji początkowych.
Statyczne generowanie witryn (SSG)
Strona statyczna (SSG) generuje statyczne pliki HTML podczas kompilacji i dostarcza je użytkownikom bez renderowania po stronie serwera lub klienta. Treści internetowe są tworzone w uporządkowanym formacie, takim jak Markdown, JSON lub YAML, i zawierają tekst, obrazy i inne zasoby. Narzędzia statyczne do generowania witryn, takie jak Hugo czy Jekyll, przetwarzają zawartość i generują pliki HTML, CSS oraz JavaScript. Statyczne dane wyjściowe obejmują całą witrynę, które są wdrażane na serwerze WWW, w sieci CDN lub w usłudze hostingowej.
Więcej informacji o CSS i HTML znajdziesz na web.dev.
Ponieważ pliki są statyczne, mogą być przechowywane w pamięci podręcznej i w rezultacie ładują się bardzo szybko. SSG to dobre rozwiązanie w przypadku aplikacji internetowych, które nie zmieniają się często, lub tych, które są aktualizowane za pomocą okresowych kompilacji witryny. Nie sprawdza się w przypadku aplikacji internetowych z dynamiczną interakcją.
Renderowanie po stronie klienta
Renderowanie po stronie klienta odbywa się w przeglądarce klienta, a nie na serwerze. Aplikacje internetowe są często wczytywane za pomocą minimalnej liczby szablonów HTML, a potem zawartość jest dynamicznie modyfikowana za pomocą kodu JavaScript i danych z serwerów lub interfejsów API. Po wysłaniu żądania aplikacji serwer wysyła krótki dokument HTML z podstawową strukturą i kodem JavaScript potrzebnym do wyrenderowania strony. Kod JavaScript jest uruchamiany w przeglądarce użytkownika. Następnie kod przetwarza pobrane dane i generuje treść, w tym CSS, HTML i wszystkie interaktywne elementy. Kod JavaScript odpowiada następnie na interakcje użytkownika, takie jak przesłanie formularza.
Korzyści płynące z obsługi klienta to szybkie przełączanie stron i responsywny interfejs. Aplikacje internetowe oparte na podwyższeniu standardu klienta często mają długi czas wczytywania początkowego w porównaniu z SSR i mogą stanowić problemy związane z SEO. Ich tworzenie i utrzymywanie staje się coraz bardziej skomplikowane.