Isole Astro

Astro ha pionierizzato e reso popolare un’architettura frontend chiamata Isole. L’architettura a isole comporta migliori prestazioni frontend aiutandoti a evitare modelli JavaScript monolitici e rimuovendo tutto il JavaScript non essenziale dalla pagina automaticamente. Gli sviluppatori continuano a usare i loro componenti e framework UI preferiti con Astro e ottengono comunque questi benefici.

Una breve lezione di storia

Sezione intitolata Una breve lezione di storia

Il termine “isola di componenti” è stato coniato per la prima volta dall’architetto frontend di Etsy Katie Sylor-Miller nel 2019. Questa idea è stata poi ampliata e documentata in questo post dal creatore di Preact Jason Miller l’11 agosto 2020.

L’idea generale di un’architettura a “Isole” è ingannevolmente semplice: renderizzare pagine HTML sul server e iniettare segnaposto o slot intorno a regioni altamente dinamiche […] che possono quindi essere “idratate” sul client in piccoli widget autosufficienti, riutilizzando il loro HTML renderizzato inizialmente sul server. — Jason Miller, Creatore di Preact

La tecnica su cui si basa questo pattern architettonico è nota anche come idratazione parziale o selettiva.

Al contrario, la maggior parte dei framework web basati su JavaScript idratano e renderizzano un intero sito web come un’unica grande applicazione JavaScript (nota anche come applicazione a pagina singola o SPA). Le SPA forniscono semplicità e potenza ma soffrono di problemi di prestazioni di caricamento della pagina a causa dell’elevato utilizzo di JavaScript lato client.

Le SPA hanno il loro posto, anche incorporate all’interno di una pagina Astro. Ma le SPA mancano della capacità nativa di idratare selettivamente e strategicamente, rendendole una scelta troppo pesante per la maggior parte dei progetti sul web di oggi.

Astro è diventato popolare come il primo framework web JavaScript mainstream con idratazione selettiva integrata, utilizzando quel pattern di isole di componenti coniato per la prima volta da Sylor-Miller.

Cos’è un isola?

Sezione intitolata Cos’è un isola?

In Astro, un‘“isola” si riferisce a qualsiasi componente UI interattivo nella pagina. Pensa a un’isola come a un widget interattivo che galleggia in un mare altrimenti statico e leggero di HTML renderizzato lato server.

Header (isola interattiva)

Barra laterale (HTML statico)

Contenuto statico come testo, immagini, ecc.

Carosello di immagini (isola interattiva)

Piè di pagina (HTML statico)

Fonte: Islands Architecture: Jason Miller

Un’isola funziona sempre in isolamento dalle altre isole nella pagina e possono esistere più isole in una pagina. Le isole possono ancora condividere stato e comunicare tra loro, anche se funzionano in contesti di componenti diversi.

Questa flessibilità consente ad Astro di supportare più framework UI come React, Preact, Svelte, Vue e SolidJS. Poiché sono indipendenti, puoi anche mescolare diversi framework in ogni pagina.

Consiglio

Anche se la maggior parte degli sviluppatori si atterrà a un solo framework UI, Astro supporta più framework nello stesso progetto. Questo ti consente di:

• Scegliere il framework migliore per ogni componente.
• Imparare un nuovo framework senza dover avviare un nuovo progetto.
• Collaborare con altri anche quando si lavora in framework diversi.
• Convertire gradualmente un sito esistente in un altro framework senza tempi di inattività.

Creare un isola

Sezione intitolata Creare un isola

Per impostazione predefinita, Astro convertirà automaticamente ogni componente UI solo in HTML e CSS, eliminando tutto il JavaScript lato client automaticamente.

src/pages/index.astro

<MyReactComponent />

Questo potrebbe sembrare restrittivo, ma questo comportamento mantiene i siti web Astro veloci per impostazione predefinita e protegge gli sviluppatori dall’inviare accidentalmente JavaScript non necessario o indesiderato che potrebbe rallentare il loro sito web.

Trasformare qualsiasi componente UI statico in un’isola interattiva richiede solo una direttiva client:*. Astro quindi compila e impacchetta automaticamente il tuo JavaScript lato client per prestazioni ottimizzate.

src/pages/index.astro

<!-- Questo componente è ora interattivo nella pagina!
     Il resto del tuo sito web rimane statico. -->
<MyReactComponent client:load />

Con le isole, lo JavaScript lato client viene caricato solo per i componenti interattivi espliciti che contrassegni utilizzando le direttive client:*.

E poiché l’interazione è configurata a livello di componente, puoi gestire diverse priorità di caricamento per ogni componente in base al suo utilizzo. Ad esempio, client:idle dice a un componente di caricarsi quando il browser diventa inattivo e client:visible dice a un componente di caricarsi solo una volta che entra nel viewport.

Quali sono i vantaggi delle isole?

Sezione intitolata Quali sono i vantaggi delle isole?

Il vantaggio più ovvio nella creazione con le Isole Astro è la prestazione: la maggior parte del tuo sito web viene convertita in HTML e CSS veloci e statici e lo JavaScript viene caricato solo per i singoli componenti che ne hanno bisogno. Lo JavaScript è uno degli asset più lenti che puoi caricare per byte, quindi ogni byte conta.

Un altro vantaggio è il caricamento parallelo. Nell’esempio di illustrazione sopra, l‘“isola carosello immagini” a bassa priorità non deve bloccare l‘“isola intestazione” ad alta priorità. I due vengono caricati in parallelo e idratati in isolamento, il che significa che l’intestazione diventa interattiva immediatamente senza dover attendere il carosello di immagini più pesante più in basso nella pagina.

Ancora meglio, puoi dire ad Astro esattamente come e quando renderizzare ogni componente. Se quel carosello di immagini è davvero costoso da caricare, puoi allegare una direttiva client speciale che dice ad Astro di caricare il carosello solo quando diventa visibile nella pagina. Se l’utente non lo vede mai, non viene mai caricato.

In Astro, sta a te come sviluppatore dire esplicitamente ad Astro quali componenti nella pagina devono essere eseguiti anche nel browser. Astro idraterà esattamente ciò che è necessario nella pagina e lascerà il resto del tuo sito come HTML statico.

Le Isole sono il segreto della storia delle prestazioni veloci per impostazione predefinita di Astro!