Petr Paločko - fotograf a webový vývojář Petr Paločko Fotograf & Webový vývojář
Zpět na výpis článků Astro integrace: Rozšiř možnosti svého webu

Co jsou Astro Islands a k čemu slouží?

Podíváme se na to, co jsou Astro Islands, k čemu slouží a jak je správně použít v Astro projektu.

Architektura Astro Islands neboli Astro “ostrovů” výrazně zvyšuje výkon frontendu. Dosahuje toho tím, že efektivně předchází vzniku monolitických JavaScriptových struktur a zároveň automaticky odstraňuje ze stránky veškerý nadbytečný JavaScript. Klíčovou výhodou je, že vývojáři mohou i nadále pracovat se svými oblíbenými UI komponentami a frameworky v rámci systému Astro, a přitom plně využívat tyto výkonnostní benefity. Tímto způsobem tato architektura nabízí ideální kombinaci flexibility a optimalizace.

Co je “ostrov”?

V systému Astro představuje “ostrov” interaktivní prvek uživatelského rozhraní na webové stránce. Lze si jej představit jako dynamický widget, který vystupuje z okolního statického prostředí tvořeného lehkým, serverem vykresleným HTML. Každý “ostrov” běží izolovaně, což umožňuje efektivní správu výkonu, přičemž na jedné stránce může koexistovat více “ostrovů”. Přestože fungují nezávisle, “ostrovy” mají schopnost sdílet stav a vzájemně komunikovat, a to i když operují v odlišných kontextech komponent.

Klíčovou výhodou této architektury je její flexibilita. Astro díky ní podporuje širokou škálu frameworků uživatelského rozhraní, včetně populárních řešení jako React, Preact, Svelte, Vue a SolidJS. Tato všestrannost jde ještě dál - umožňuje dokonce kombinovat několik různých frameworků na jedné stránce. Vývojáři tak získávají nebývalou svobodu při volbě nástrojů pro tvorbu interaktivních komponent, aniž by museli obětovat výkon nebo se omezovat na jediný ekosystém.

Tento přístup tak efektivně spojuje izolaci komponent pro optimální výkon s flexibilitou potřebnou pro vývoj komplexních a různorodých webových aplikací.

Vytvoření “ostrova”

Astro ve své základní konfiguraci přistupuje k vykreslování komponent uživatelského rozhraní specifickým způsobem. Automaticky převádí každou komponentu do čistého HTML a CSS, přičemž současně eliminuje veškerý JavaScript určený pro běh na straně klienta.

// src/pages/index.astro
<MyReactComponent />

Volání React komponenty, která se vyrenderuje pouze jako statické HTML a CSS.

Tento přístup může na první pohled působit přísně, ale právě on zajišťuje, že webové stránky vytvořené v Astru jsou ve výchozím nastavení rychlé. Zároveň chrání vývojáře před neúmyslným odesláním nadbytečného nebo nežádoucího JavaScriptu, který by mohl zpomalit jejich web.

Pokud chcete převést statickou komponentu uživatelského rozhraní na interaktivní “ostrov”, stačí použít direktivu client:*. Astro pak automaticky sestaví a optimalizuje klientský JavaScript pro maximální výkon.

// src/pages/index.astro
<MyReactComponent client:load />

Volání React komponenty, včetně JavaScriptu.

Koncept “ostrovů” umožňuje, že klientský JavaScript se načítá pouze pro konkrétní interaktivní komponenty, které výslovně označíte pomocí direktiv client:*.

Díky tomu, že interaktivitu nastavujete na úrovni jednotlivých komponent, můžete pro každou z nich určit různé priority načítání podle jejich využití. Například direktiva client:idle instruuje komponentu, aby se načetla, jakmile prohlížeč přejde do stavu nečinnosti. Naproti tomu client:visible zajistí, že se komponenta načte až ve chvíli, kdy se dostane do viditelné oblasti obrazovky.

Dostupné možnosti direktivy client:*

  • client:load - komponenta se načítá při načtení stránky.

    // src/pages/index.astro
    <MyReactComponent client:load />

    Příklad použití direktivy client:load.

  • client:idle - komponenta se načítá při načtení stránky, ale se svým načtením vyčkává, dokud se nenačte vše ostatní.

    // src/pages/index.astro
    <MyReactComponent client:idle />

    Příklad použití direktivy client:idle.

  • client:visible - komponenta se načítá až ve chvíli, kdy ji má uživatel ve viewportu.

    // src/pages/index.astro
    <MyReactComponent client:visible />

    Příklad použití direktivy client:visible.

  • client:media - komponenta se načítá staticky při načtení stránky, ale JavaScript se načte pouze za splněné media podmínky.

    // src/pages/index.astro
    <MyReactComponent client:media="(max-width: 768px)" />

    Příklad použití direktivy client:media.

  • client:only - komponenta se načítá klasicky dle uvedeného frameworku, bez statického vykreslení.

    // src/pages/index.astro
    <MyReactComponent client:only="react" />

    Příklad použití direktivy client:only.

Jaké jsou výhody “ostrovů”?

  • Výkon: Většina webu se převede na rychlé, statické HTML, zatímco JavaScript se načítá pouze pro konkrétní komponenty, které jej potřebují.
  • Paralelní načítání: “ostrovy” se načítají souběžně a hydratují se nezávisle na sobě.
  • Podmíněné vykreslování: Můžete přesně určit, jak a kdy se má každá komponenta vykreslit.

Astro nabízí jedinečnou možnost využívat více frameworků uživatelského rozhraní v rámci jednoho projektu, což přináší řadu výhod:

  • Optimální volba pro každou komponentu: Můžete zvolit framework, který nejlépe vyhovuje potřebám konkrétní komponenty.
  • Snadné učení nových technologií: Nový framework lze vyzkoušet a osvojit si bez nutnosti zakládat zcela nový projekt.
  • Efektivní týmová spolupráce: Umožňuje kooperaci vývojářů se zkušenostmi v různých frameworcích na jednom projektu.
  • Plynulá migrace: Stávající web lze postupně převádět na jiný framework bez přerušení provozu.

Tato flexibilita je užitečná, i když většina vývojářů obvykle preferuje práci s jedním konkrétním frameworkem.

Závěr

Architektura Astro “ostrovů” představuje inovativní přístup k vývoji webových aplikací, který elegantně spojuje výhody statických a dynamických webů. Tato technologie optimalizuje výkon selektivním použitím JavaScriptu, nabízí flexibilitu díky možnosti kombinovat různé frameworky a efektivně využívá systémové zdroje prostřednictvím paralelního načítání a podmíněné hydratace komponent.

Astro “ostrovy” tak tvoří most mezi klasickým statickým obsahem a bohatými interaktivními aplikacemi, poskytujíce vývojářům nástroje pro tvorbu výkonných, flexibilních a uživatelsky přívětivých webových stránek, čímž otevírají nové možnosti pro budoucnost webového vývoje.

Samozřejmě na HeroHero již ve čtvrtek najdete video, kde Astro “ostrovy” probírám více do hloubky, včetně jejich instalace a využití.