Architektura islands: selektywna hydratacja

Islands Architecture, termin ukuty przez Jasona Millera w 2020 roku, traktuje stronę internetową jako w większości statyczny kod HTML z osadzonymi, odizolowanymi «wyspami» interaktywności. Statyczny ocean kodu HTML jest wysyłany do przeglądarki bez zmian. Tylko interaktywne wyspy pobierają i wykonują JavaScript, dzięki czemu jego rozmiar jest proporcjonalny do rzeczywistej interaktywności.

Każda wyspa jest niezależnie poddawanym hydratacji komponentem. Serwer renderuje początkowy kod HTML wyspy razem z resztą strony. Gdy JavaScript wyspy zostanie załadowany, React przeprowadza hydratację wyłącznie tego poddrzewa komponentów. Kod HTML otaczający wyspy nigdy nie jest modyfikowany przez JavaScript — pozostaje naprawdę statyczny.

Na stronie wpisu blogowego wykorzystującej Islands Architecture pakiet JavaScriptu może mieć rozmiar 5 kB dla pojedynczej wyspy z przyciskiem polubienia. Ta sama strona zbudowana jako SPA w React mogłaby wysyłać ponad 200 kB JavaScriptu w celu przeprowadzenia hydratacji całej strony. Podejście oparte na wyspach sprawia, że rozmiar pakietu jest proporcjonalny do interaktywności, a nie do rozmiaru strony.

Astro, najpopularniejszy framework wykorzystujący Islands Architecture, obsługuje wyspy zbudowane przy użyciu różnych frameworków na tej samej stronie. Można umieścić obok siebie wyspę Reacta, wyspę Vue i wyspę wykorzystującą czysty JavaScript. Każda wyspa jest niezależnie pakowana, więc użytkownicy pobierają tylko kod frameworków używanych przez widoczne wyspy.

Dyrektywa client:load przeprowadza hydratację wyspy natychmiast po załadowaniu strony. Należy jej używać w przypadku wysp, które są od razu widoczne i interaktywne, takich jak menu nawigacyjne lub sekcja główna z polem wyszukiwania. Jest to strategia hydratacji o najwyższym priorytecie.

Dyrektywa client:idle czeka, aż główny wątek przeglądarki będzie bezczynny (po załadowaniu najważniejszej treści), zanim przeprowadzi hydratację wyspy. Jest idealna w przypadku widżetów znajdujących się poniżej widocznego obszaru lub drugorzędnych interakcji, które nie są potrzebne od razu, takich jak pasek udostępniania w mediach społecznościowych.

Dyrektywa client:visible wykorzystuje Intersection Observer do przeprowadzenia hydratacji wyspy dopiero wtedy, gdy zostanie ona przewinięta do obszaru widocznego w oknie. Jest to idealne rozwiązanie dla wysp znajdujących się głęboko na stronie — sekcji komentarzy lub karuzeli powiązanych produktów — do których większość użytkowników może nigdy nie dotrzeć. JavaScript nie jest nawet ładowany, dopóki nie okaże się potrzebny.

Dyrektywa client:only całkowicie pomija renderowanie po stronie serwera i renderuje wyspę wyłącznie w przeglądarce. Jest to konieczne w przypadku komponentów korzystających z interfejsów API dostępnych tylko w przeglądarce (window, document) lub zależnych od stanu po stronie klienta w momencie montowania. Ceną jest brak kodu HTML wyrenderowanego przez serwer dla tej wyspy.

Islands Architecture rozwiązuje problem pełnej hydratacji, zapewniając ładowanie i wykonywanie JavaScriptu wyłącznie dla rzeczywiście interaktywnych komponentów. Wpis na blogu z przyciskiem polubienia poddaje hydratacji tylko wyspę tego przycisku — tekst artykułu liczący 1200 słów, nagłówek i stopka nie powodują żadnego wykonywania JavaScriptu po stronie klienta.

Każda wyspa ma własny, odizolowany stan. Wyspy nie mogą bezpośrednio współdzielić stanu Reacta, ponieważ są osobnymi drzewami Reacta. Jest to zamierzone działanie: jeśli dwa komponenty muszą współdzielić stan, należy połączyć je w jedną wyspę. Komunikacja między wyspami wykorzystuje parametry URL, zdarzenia DOM lub lekkie biblioteki zarządzania stanem.

Strony migrowane z React SPA do Islands Architecture (takie jak strona dokumentacji Astro) odnotowują znaczące usprawnienia: rozmiar pakietów JavaScriptu zmniejsza się o 70–90%, TTI poprawia się o 2–4 sekundy na urządzeniach mobilnych, a wyniki wydajności w Lighthouse rosną z 60 do ponad 90 punktów. Korzyści są najbardziej widoczne na stronach zawierających dużo treści.

Za pomocą której dyrektywy hydratacji Astro można przeprowadzić hydratację komponentu dopiero wtedy, gdy przewinie się on do obszaru widocznego w oknie?

Architektura wysp pozostawia większość strony jako statyczny HTML i przeprowadza hydratację tylko odizolowanych komponentów interaktywnych. Astro udostępnia dyrektywy hydratacji: client:load (natychmiast), client:idle (po przejściu przeglądarki w stan bezczynności), client:visible (podczas przewijania) oraz client:only (renderowanie wyłącznie po stronie klienta). Każda wyspa jest hydratowana niezależnie, dzięki czemu ilość kodu JavaScript zależy od poziomu interaktywności, a nie od rozmiaru strony.