Wyspy Astro

Framework Astro zapoczątkował i spopularyzował architekturę frontendu zwaną Wyspy. Architektura Wysp zapewnia lepszą wydajność frontendu, pomagając uniknąć monolitycznych wzorców JavaScript i automatycznie usuwając ze strony cały niepotrzebny JavaScript. Deweloperzy mogą nadal korzystać ze swoich ulubionych komponentów UI i frameworków z Astro, jednocześnie czerpiąc te korzyści.

Krótka historia

Termin “wyspa komponentów” został po raz pierwszy użyty przez Katie Sylor-Miller, architektkę frontendu w Etsy, w 2019 roku. Idea ta została następnie rozwinięta i udokumentowana w tym poście przez Jasona Millera, twórcę Preact, 11 sierpnia 2020 roku.

Ogólna idea architektury “Wyspy” jest zwodniczo prosta: renderuj strony HTML na serwerze i wstrzykuj placeholdery lub sloty wokół wysoce dynamicznych regionów […], które mogą być następnie “nawodnione” po stronie klienta w małe, samodzielne widżety, ponownie wykorzystując ich początkowo wyrenderowany HTML po stronie serwera.
— Jason Miller, Twórca Preact

Technika, na której opiera się ten wzorzec architektoniczny, znana jest również jako częściowa lub selektywna hydracja.

W przeciwieństwie do tego, większość frameworków webowych opartych na JavaScripcie hydruje i renderuje całą stronę internetową jako jedną dużą aplikację JavaScript (znaną również jako aplikacja jednostronicowa lub SPA). SPA zapewniają prostotę i moc, ale cierpią z powodu problemów z wydajnością ładowania strony ze względu na intensywne wykorzystanie JavaScript po stronie klienta.

SPA mają swoje miejsce, nawet osadzone wewnątrz strony Astro. Jednak SPA brakuje wrodzonej zdolności do selektywnej i strategicznej hydracji, co czyni je w dzisiejszych czasach zbyt ciężkim wyborem dla większości projektów w sieci.

Astro zyskało popularność jako pierwszy powszechny framework webowy JavaScript z wbudowaną selektywną hydracją, wykorzystując wzorzec wysp komponentów po raz pierwszy nazwany w ten sposób przez Sylor-Miller.

Czym jest wyspa?

W Astro “wyspa” odnosi się do każdego interaktywnego komponentu UI na stronie. Wyobraź sobie wyspę jako interaktywny widżet unoszący się w morzu statycznego, lekkiego HTML renderowanego po stronie serwera.

Statyczna treść takie jak tekst, obrazy, itp.

Karuzela obrazów (interaktywna wyspa)

Źródło: Islands Architecture: Jason Miller

Wyspa zawsze działa w izolacji od innych wysp na stronie, a na jednej stronie może istnieć wiele wysp. Wyspy nadal mogą dzielić stan i komunikować się ze sobą, mimo że działają w różnych kontekstach komponentów.

Ta elastyczność pozwala Astro na obsługę wielu frameworków UI, takich jak React, Preact, Svelte, Vue i SolidJS. Ponieważ są one niezależne, możesz nawet mieszać kilka frameworków na każdej stronie.

Tworzenie wyspy

Domyślnie Astro automatycznie renderuje każdy komponent UI do samego HTML i CSS, automatycznie usuwając cały JavaScript po stronie klienta.

<MyReactComponent />

Może to brzmieć restrykcyjnie, ale to zachowanie utrzymuje strony Astro szybkimi domyślnie i chroni deweloperów przed przypadkowym wysyłaniem niepotrzebnego lub niechcianego JavaScript, który mógłby spowolnić ich stronę internetową.

Przekształcenie dowolnego statycznego komponentu UI w interaktywną wyspę wymaga tylko dyrektywy client:*. Astro następnie automatycznie buduje i pakuje Twój JavaScript po stronie klienta dla zoptymalizowanej wydajności.

<!-- Ten komponent jest teraz interaktywny na stronie!
     Reszta Twojej strony pozostaje statyczna. -->
<MyReactComponent client:load />

Dzięki wyspom, JavaScript po stronie klienta jest ładowany tylko dla jawnych interaktywnych komponentów, które oznaczysz za pomocą dyrektyw client:*.

A ponieważ interakcja jest konfigurowana na poziomie komponentu, możesz obsłużyć różne priorytety ładowania dla każdego komponentu w oparciu o jego wykorzystanie. Na przykład, client:idle mówi komponentowi, aby ładował się, gdy przeglądarka staje się bezczynna, a client:visible mówi komponentowi, aby ładował się tylko wtedy, gdy wchodzi w obszar widoczności.

Jakie są korzyści z Wysp?

Najbardziej oczywistą korzyścią z budowania z Wyspami Astro jest wydajność: większość Twojej strony internetowej jest konwertowana na szybki, statyczny HTML, a JavaScript jest ładowany tylko dla pojedynczych komponentów, które go potrzebują. JavaScript jest jednym z najwolniejszych zasobów, które możesz załadować w przeliczeniu na bajt, więc każdy bajt się liczy.

Kolejną korzyścią jest równoległe ładowanie. W przykładowej ilustracji powyżej, nisko priorytetowa wyspa “karuzela obrazów” nie musi blokować wysoko priorytetowej wyspy “Nagłówek”. Obie ładują się równolegle i hydrują w izolacji, co oznacza, że nagłówek staje się interaktywny natychmiast, bez konieczności czekania na cięższą karuzelę niżej na stronie.

Co więcej, możesz powiedzieć Astro dokładnie jak i kiedy renderować każdy komponent. Jeśli ta karuzela obrazów jest naprawdę kosztowna do załadowania, możesz dołączyć specjalną dyrektywę klienta, która mówi Astro, aby ładować karuzelę tylko wtedy, gdy staje się widoczna na stronie. Jeśli użytkownik nigdy jej nie zobaczy, nigdy się nie załaduje.

W Astro to ty jako deweloper musisz wyraźnie powiedzieć Astro, które komponenty na stronie muszą również działać w przeglądarce. Astro będzie hydrować tylko to, co jest dokładnie potrzebne na stronie i pozostawi resztę Twojej strony jako statyczny HTML.

Wyspy są tajemnicą sukcesu Astro w zakresie domyślnej wydajności!

Pomóż nam

Społeczność