Architektura wysp
Astro pomogło zapoczątkować i spopularyzować nowy wzorzec architektury frontendu zwaną Architekturą Wysp. Działa ona poprzez renderowanie większości twojej strony do szybkiego, statycznego HTML-a z mniejszymi “wyspami” JavaScriptu, dodanymi, gdy na stronie jest potrzebna interaktywność lub personalizacja (np. karuzela zdjęć). Pomaga to uniknąć monolitycznych payloadów JavaScriptu, które spowalniają responsywność wielu innych, nowoczesnych frameworków webowych JavaScript.
Krótka historia
Dział zatytułowany „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 “Wysp” 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 JavaScriptu po stronie klienta.
SPA mają swoje miejsce, nawet osadzone wewnątrz strony Astro (EN). 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. Od tego czasu rozszerzyliśmy i ewoluowaliśmy pracę Sylor-Miller, co pomogło zainspirować podobne podejście komponentów-wysp do treści dynamicznie renderowanych przez serwer.
Czym jest wyspa?
Dział zatytułowany „Czym jest wyspa?”W Astro “wyspa” to ulepszony komponent UI na stronie HTML, która w innym przypadku byłaby statyczna.
Wyspa kliencka jest interaktywnym JavaScriptowym komponentem UI, do której hydracji dochodzi oddzielnie od reszty strony. Wyspa serwerowa to natomiast komponent UI, który renderuje dynamiczną zawartość na serwerze niezależnie od reszty strony.
Obie wyspy uruchamiają kosztowne lub wolniejsze procesy w sposób niezależny, na bazie komponentu, dla zoptymalizowanego ładowania stron.
Komponenty wysp
Dział zatytułowany „Komponenty wysp”Komponenty Astro to klocki konstrukcyjne szablonu twojej strony. Są renderowane do statycznego HTML-a bez wykonywania po stronie klienta.
Wyobraź sobie wyspę jako interaktywny widżet unoszący się w morzu statycznego, lekkiego HTML renderowanego po stronie serwera. Wyspy serwerowe mogą zostać dodane do spersonalizowanych lub dynamicznych elementów renderowanych przez serwer, takich jak zdjęcie profilowe zalogowanego użytkownika.
Ź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.
Wyspy klienckie
Dział zatytułowany „Wyspy klienckie”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 domyślnie szybkimi i chroni deweloperów przed przypadkowym wysyłaniem niepotrzebnego lub niechcianego JavaScriptu, 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.
Korzyści wysp klienckich
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 do załadowania 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 “karuzeli obrazów” nie musi blokować wysoko priorytetowej wyspy “Nagłówka”. 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 (EN), 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!
Wyspy serwerowe
Dział zatytułowany „Wyspy serwerowe”Wyspy serwerowe są sposobem na przeniesienie kosztownego lub powolnego kodu po stronie serwera z daleka od głównego procesu renderowania, ułatwiając łączenie wysokowydajnego, statycznego HTML-a i dynamicznych komponentów wygenerowanych przez serwer.
Dodaj dyrektywę server:defer (EN) do dowolnego komponentu Astro na twojej stronie, aby zamienić go w wyspę serwerową:
---import Avatar from "../components/Avatar.astro";---<Avatar server:defer />To rozbija twoją stronę w mniejsze obszary treści renderowanych przez serwer, a każda z nich ładuje równolegle.
Główna treść twojej strony może zostać wyrenderowana natychmiastowo z treściami zastępczymi, takimi jak generyczne awatary, dopóki treść twojej wyspy nie będzie dostępna. Z wyspami serwerowymi posiadanie małych komponentów ze spersonalizowaną treścią nie opóźnia renderowania strony, która w innym przypadku byłaby statyczna.
Ten wzorzec renderowania został zaprojektowany jako przenośny. Nie polega on na żadnej infrastrukturze serwerowej, więc będzie działać z każdym hostem, od serwera Node.js w kontenerze Dockera, do wybranego przez ciebie dostawcy usług bezserwerowych.
Korzyści wysp serwerowych
Jedną z korzyści wysp serwerowych jest możliwość renderowania bardziej dynamicznych części twojej strony na bieżąco. To umożliwia bardziej agresywne buforowanie zewnętrznej powłoki i głównej zawartości, co przekłada się na szybsze działanie.
Kolejną korzyścią jest zapewnienie świetnych wrażeń odwiedzającym. Wyspy serwerowe są zoptymalizowane i ładują się szybko, często nawet zanim przeglądarka “namaluje” stronę. Jednak w krótkim czasie, który zajmuje twoim wyspom renderowanie, możesz wyświetlić dostosowane treści zastępcze oraz uniknąć jakichkolwiek zmian w układzie strony.
Przykładem strony, która ma korzyści z wysp serwerowych Astro może być strona sklepu e-commerce. Mimo to, że główne treści podstron produktowych nie zmieniają się często, te strony posiadają zazwyczaj jakieś dynamiczne części:
- Awatar użytkownika w nagłówku.
- Specjalne oferty i wyprzedaże produktu.
- Recenzje użytkowników.
Dzięki korzystaniu z wysp serwerowych dla tych elementów, twoi odwiedzający zobaczą najważniejszą część strony, czyli twój produkt, natychmiastowo. Generyczne awatary, wskaźniki ładowania oraz ogłoszenia sklepowe mogą być wyświetlane z treściami zastępczymi, dopóki części spersonalizowane nie są dostępne.