Isole Astro
Isole Astro (note anche come Isole di componenti) sono un modello di architettura web sviluppato da Astro. Il concetto di “architettura delle isole” è stato coniato per la prima volta dalla sviluppatrice frontend di Etsy, Katie Sylor-Miller, nel 2019, ed è stato ampliato in questo articolo dal creatore di Preact, Jason Miller.
Cosa sono le Isole Astro?
Sezione intitolata Cosa sono le Isole Astro?Il termine “Isola Astro” si riferisce a un componente UI interattivo all’interno di una pagina HTML statica. Su una pagina possono esistere più isole, e un’isola viene sempre renderizzata da sola. Pensate a esse come isole in un mare di HTML statico e non interattivo.
Contenuto statico come testo, immagini, ecc.
Fonte: Island Architecture: Jason Miller
In Astro, è possibile utilizzare qualsiasi framework UI supportato (React, Svelte, Vue, ecc.) per renderizzare le isole nel browser. È possibile combinare diversi framework sulla stessa pagina o semplicemente scegliere il tuo preferito.
La tecnica su cui si basa questo modello architetturale è nota come idratazione parziale o selettiva. Astro sfrutta questa tecnica dietro le quinte, alimentando automaticamente le tue isole.
Come funzionano le isole in Astro?
Sezione intitolata Come funzionano le isole in Astro?Astro genera ogni sito web senza alcun JavaScript lato client, per impostazione predefinita. Utilizza un componente UI frontend costruito con React, Preact, Svelte, Vue, SolidJS, AlpineJS o Lit, e Astro lo renderizzerà automaticamente in HTML in anticipo per poi rimuovere tutto il JavaScript. Questo mantiene ogni sito veloce per impostazione predefinita, eliminando tutto il JavaScript inutilizzato dalla pagina.
---// Esempio: Usa un componente React statico sulla pagina, senza JavaScript.import MyReactComponent from '../components/MyReactComponent.jsx';---<!-- 100% HTML, Zero JavaScript caricato sulla pagina! --><MyReactComponent />Ma talvolta è necessario del JavaScript lato client per creare un’interfaccia utente interattiva. Invece di costringere l’intera pagina a diventare un’applicazione JavaScript simile ad un’applicazione a pagina singola (SPA), Astro ti chiede di creare un’isola.
---// Esempio: Usa un componente React dinamico sulla pagina.import MyReactComponent from '../components/MyReactComponent.jsx';---<!-- Questo componente ora è interattivo sulla pagina! Il resto del tuo sito web rimane statico e senza JS. --><MyReactComponent client:load />Con le Isole Astro, la stragrande maggioranza del tuo sito rimane in HTML e CSS. Nell’esempio sopra, hai appena aggiunto una singola isola di interattività, isolata dal resto della pagina, senza modificare anche il resto della pagina.
Quali sono i vantaggi delle isole?
Sezione intitolata Quali sono i vantaggi delle isole?Il vantaggio più evidente nell’utilizzo delle Isole Astro è la performance: la maggior parte del tuo sito web viene convertito in HTML statico veloce e JavaScript viene caricato solo per i singoli componenti che ne hanno bisogno. JavaScript è uno degli asset più lenti da caricare per byte, quindi ogni byte conta.
Un altro vantaggio è il caricamento parallelo. Nell’illustrazione di esempio sopra, l’isola “carosello di immagini” a bassa priorità non deve bloccare l’isola “intestazione” ad alta priorità. Le due vengono caricate in parallelo e idratate in isolamento, il che significa che l’intestazione diventa immediatamente interattiva senza dover aspettare il carosello più pesante più in basso nella pagina.
Ancora meglio, puoi dire ad Astro esattamente come e quando renderizzare ciascun componente. Se quel carosello di immagini è davvero pesante da caricare, puoi aggiungere una direttiva client (EN) speciale che indica ad Astro di caricare il carosello solo quando diventa visibile sulla pagina. Se l’utente non lo vede mai, non viene mai caricato.
In Astro, è lo sviluppatore ad indicare esplicitamente quali componenti sulla pagina devono essere eseguiti anche nel browser. Astro idraterà solo ciò di cui c’è bisogno sulla pagina e lascerà il resto del tuo sito come HTML statico.
Le isole sono il segreto delle performance di Astro!
Learn