Il meta framework JavaScript Astro è stato aggiornato, vantando una selezione di nuove funzionalità.

AstroJS è un fantastico strumento basato su JavaScript utilizzato per creare siti Web statici superveloci. Ti consente di creare siti Web utilizzando più framework JavaScript come React, Vue e Svelte. Astro 2.5 offre una serie completamente nuova di funzionalità, alcune delle quali verranno trattate qui.

1. Raccolte di dati

Astro 2.5 ora supporta l'archiviazione di JSON e YAML nelle raccolte. La nuova proprietà type: 'data' abilita questa funzionalità. Per dimostrarlo, crea una raccolta di dati "scrittori" nella cartella src/content, dove JSON O YAML è possibile aggiungere file.

Successivamente, configura le raccolte in src/content/config.ts utilizzando il file defineCollection E z.z utilità da astro: contenuto module e impostando il tipo su data.

importare { z, definisciCollezione } da"astro: contenuto";
cost autori = defineCollection({
tipo: "dati",
schema: z.z.oggetto({ nome: Z.corda() }),
});
instagram viewer

Infine, esporta l'oggetto della raccolta per registrare le tue raccolte.

esportarecost collezioni = {scrittori:scrittori}

2. Minimizzazione HTML

Astro 2.5 introduce l'opzione compressHTML che rimuove tutti gli spazi bianchi (e le interruzioni di riga) dal codice HTML. I componenti vengono compressi solo una volta dal compilatore Astro e poi durante la compilazione. Questo viene fatto per ridurre i costi delle prestazioni.

Abilitare questa opzione nel tuo progetto è facile. Basta aggiungere le seguenti righe al file di configurazione. La minimizzazione HTML funziona solo con i componenti scritti nel formato di file .astro.

esportarepredefinitodefineConfig({compressHTML:VERO})

3. Rendering parallelizzato

Il rendering dei componenti in parallelo è una funzionalità tanto attesa in Astro. Nei casi in cui i componenti figli in diversi sottoalberi recuperano i dati, Astro 2.5 migliora i tempi di caricamento recuperando i dati in parallelo.

Ciò consente di eseguire il rendering di un componente più in basso nell'albero senza essere bloccato da un componente di recupero dati più in alto nell'albero. Al momento, il rendering parallelo non funziona correttamente con matrice.mappa frammenti asincroni.

Astro 2.5 offre anche una serie completamente nuova di funzionalità sperimentali descritte di seguito.

4. Rendering ibrido

Astro 2.5 ora ti consente di definire una nuova opzione di output del server nel tuo file di configurazione che sovrascrive il comportamento di pre-rendering predefinito di SSR.

Per sfruttare il rendering ibrido, set ibridoUscita su true nella sezione sperimentale della tua configurazione e aggiungi un adattatore.

In questo modo verrà eseguito il pre-rendering dell'intero sito per impostazione predefinita, ma puoi disattivare questo comportamento impostando il file prerender esportazione di qualsiasi percorso o pagina su false:

esportarecost prerendere = falso;

5. Direttive client personalizzate

Astro 2.5 introduce l'API addClientDirective per il controllo personalizzato dell'idratazione dei componenti lato client tramite custom cliente:* direttive.

Per utilizzare questa funzione, Abilita Experimental.customClientDirectives nel file di configurazione e mantenere minimi i punti di ingresso delle direttive per evitare qualsiasi impatto negativo sull'idratazione dei componenti.

Una funzione di tipo ClientDirective dovrebbe essere esportato dal file delle direttive client. Ad esempio, il codice seguente idrata il componente al primo clic sulla finestra.

importare {DirettivaCliente} da"astro";
cost clickDirective: ClientDirective = (carica, opta, el) => {
finestra.addEventListener(
"clic",
asincrono () => {
cost idrato = aspetta carico();
aspetta idrato();
},
{ una volta: VERO }
);
};
esportarepredefinito fare clic suDirettiva;

Ora cliente: clic può essere utilizzato nei tuoi componenti con supporto di tipo completo.

Come installare Astro

Astro fornisce un'interfaccia a riga di comando (CLI) chiamata creare astro per iniziare. Devi avere NodeJS 16+ e npm installati sulla tua macchina.

npm crea astro@ultimo

Questo impalcherà un nuovo progetto Astro da zero. Segui le istruzioni sullo schermo per impostare le cose (se non sei sicuro di cosa scegliere, vai con le opzioni consigliate). Prossimo, CD nella cartella del progetto, quindi eseguire:

npm esegue lo sviluppo

Puoi aggiungere framework come React, usando astro aggiungi. Se tutto è installato correttamente puoi aprire host locale: 3000 sulla tua macchina, e dovresti vedere un messaggio "Welcome to Astro".

Se non ti piace NPM, puoi optare per altro Gestori di pacchetti JavaScript come Yarn e PNPM.

Migliorare l'esperienza degli sviluppatori con Astro

Framework all-in-one come Astro rendono lo sviluppo di siti Web veloci il più agevole possibile. È fantastico, la natura agnostica dell'interfaccia utente significa che puoi lavorare con qualsiasi framework JavaScript popolare di tua scelta senza problemi.