W tym artykule postaram się przyjrzeć bliżej zagadnieniu SSR i CSR , które już wcześniej omawiałem . Metody renderowania zostaną szczegółowo omówione w artykule.

W tym artykule omówię artykuł Jasona Millera i Addy Osmani zatytułowany Rendering on Web i postaram się wyjaśnić ten temat.

Artykuł powstał na podstawie mojego artykułu Where Should HTML Rendering Be Done? który napisałem jakiś czas temu. Wszystko zaczyna się od pytania zadanego we wpisie na blogu.

Podczas tworzenia witryny internetowej istnieje możliwość wykonywania logiki i renderowania w różnych miejscach. Jak programiści zdecydują, które podejście preferują, skoro istnieją różne metody tworzenia stron internetowych?

Aby podjąć tę decyzję, programiści muszą dobrze rozumieć metody renderowania i wynikające z nich kompromisy w zakresie wydajności.

A.Renderowanie

Jeśli zastanawiasz się, jaki jest temat renderowania. Szczegóły możesz przeczytać we wpisie na blogu , w którym wyjaśniłem ten temat
.

B. Sieć statyczna i dynamiczna

Kolejną rzeczą, którą należy zrozumieć, jest różnica między siecią statyczną a siecią dynamiczną . Statyczne strony internetowe to strony , które po pobraniu strony z serwera (HTML, CSS, JS) nie wracają na serwer i nie wysyłają żądań za pomocą AJAX. Ich zawartość nie zmienia się w zależności od użytkownika ani nie zawiera danych dynamicznych (kurs walutowy, pogoda itp.) ze względu na zmianę zawartych w niej danych. Na przykład blogi, wiadomości itp. Z kolei strony dynamiczne to strony internetowe wymagające AJAX, API, bazy danych itp., których zawartość zmienia się zgodnie z wywołanym interwałem czasu i parametrami.

C. Warunki wykonania

• TTFB (czas do pierwszego bajtu) Czas między kliknięciem łącza a otrzymaniem pierwszego bitu treści.
• FP (First Paint) Czas potrzebny do wyświetlenia użytkownikowi pierwszego piksela.
• FCP (First Contentful Paint) Czas wyświetlenia pierwszej logicznej zawartości w żądaniu.
• Czas do interakcji TTI Czas, w którym strona jest gotowa do interakcji z użytkownikiem (połączenie wszystkich zdarzeń)

• SSR (Server Side Rendering): Metoda ta polega na tym, że proces renderowania odbywa się po stronie serwera, a strony dynamiczne są tworzone przez pobieranie ich z bazy danych za pomocą metod takich jak ASP.Net, JSP, PHP. Ponieważ JS będzie miał znacznie mniejszą rolę w tworzeniu ekranu, FP i FCP będą bardzo szybkie, natomiast czas potrzebny na dostarczenie danych z serwera będzie dłuższy w przypadku TTFB .
• CSR (Client Side Rendering): W tej metodzie renderowanie odbywa się po stronie przeglądarki, przy użyciu metod takich jak Angular, React, Vue, Svelte. Strony dynamiczne są pobierane za pomocą AJAX, a ekrany są tworzone na ekranie przez połączenie szablonu + danych za pomocą metody Template Rendering. W tej metodzie, nawet jeśli wykonamy TTFB i FP szybciej, nie jesteśmy w stanie przyspieszyć TTI, czyli czasu potrzebnego użytkownikowi na interakcję z odpowiednią stroną internetową.
• Renderowanie statyczne: W tej metodzie stosowanej w przypadku stron statycznych, ponieważ strony zmieniają się bardzo mało i nie ma potrzeby korzystania z bazy danych, strony są doprowadzane do stanu końcowego za pomocą metody wstępnego renderowania przed wysłaniem na serwer i przesyłane do środowisk CDN lub pamięci podręcznej brzegowej, skąd są bardzo szybko serwowane. Ostatnio tworzenie tego typu stron stało się o wiele łatwiejsze dzięki narzędziom Gatsby i Jekyll. Na tych stronach czasy TTFB i TTI są dość krótkie. Potrzeby związane z wykonywaniem kodu JavaScript i interakcją z takimi stronami są bardzo niskie i ograniczone.
• Renderowanie hybrydowe: Podczas gdy tworzenie SSR dla niektórych stron ma sens w zależności od obciążenia ich treścią, to jednak w przypadku stron o dużym obciążeniu sensowne jest tworzenie ich z leniwym CSR. Powstały takie frameworki jak Next, Nuxt, Nest i Sapper, które wspierają takie sytuacje. Ta struktura ma podobne możliwości przy jednoczesnym zastosowaniu metody tworzenia komponentów Next – React, Nuxt – Vue, Nest – Angular, Sapper – Svelte w tworzeniu kodu.

Odniesienia

• Renderowanie w sieci
• Różnica między statycznymi i dynamicznymi stronami internetowymi
• Gdzie powinno odbywać się renderowanie HTML?

Aby uzyskać dostęp do kontynuacji tego artykułu lub innych artykułów z grupy artykułów , kliknij ten link .