5 nya funktioner att prova i Astro 2.5

AstroJS är ett fantastiskt JavaScript-baserat verktyg som används för att skapa supersnabba statiska webbplatser. Det låter dig skapa webbplatser med hjälp av flera JavaScript-ramverk som React, Vue och Svelte. Astro 2.5 ger en helt ny uppsättning funktioner, av vilka några kommer att behandlas här.

1. Datainsamlingar

Astro 2.5 stöder nu lagring av JSON och YAML i samlingar. Den nya typen: 'data'-egenskapen aktiverar denna funktionalitet. För att demonstrera detta, skapa en "writers"-datasamling i src/content-mappen, där JSON eller YAML filer kan läggas till.

Konfigurera sedan samlingarna i src/content/config.ts med hjälp av defineCollection och z verktyg från astro: innehåll modul och ställ in typen till data.

importera { z, defineCollection } från"astro: innehåll";
konst writers = defineCollection({
typ: "data",
schema: z.objekt({ namn: z.sträng() }),
});

Exportera slutligen samlingsobjektet för att registrera dina samlingar.

exporterakonst samlingar = {författare:writers}

2. HTML-minifiering

Astro 2.5 introducerar alternativet compressHTML som tar bort alla blanksteg (och radbrytningar) från din HTML. Komponenter komprimeras endast en gång av Astro-kompilatorn och sedan under byggandet. Detta görs för att minska prestationskostnaderna.

Det är enkelt att aktivera det här alternativet i ditt projekt. Lägg bara till följande rader i din konfigurationsfil. HTML Minification fungerar endast med komponenter skrivna i filformatet .astro.

exporterastandarddefineConfig({komprimera HTML:Sann})

3. Parallelliserad rendering

Att rendera komponenter parallellt är en efterlängtad funktion i Astro. I de fall där underordnade komponenter i olika underträd hämtar data, förbättrar Astro 2.5 laddningstiderna genom att hämta data parallellt.

Detta gör att en komponent längre ner i trädet kan renderas utan att blockeras av en datahämtningskomponent högre upp i trädet. För närvarande fungerar inte parallell rendering korrekt med array.map asynkrona fragment.

Astro 2.5 ger också en helt ny uppsättning experimentella funktioner som beskrivs nedan.

4. Hybrid rendering

Astro 2.5 låter dig nu definiera ett nytt serverutmatningsalternativ i din konfigurationsfil som åsidosätter standardförrenderingsbeteendet för SSR.

För att dra nytta av hybridrendering, ställ in hybridutgång till sant i den experimentella delen av din konfiguration och lägg till en adapter.

Om du gör detta kommer hela din webbplats att förrenderas som standard, men du kan välja bort detta beteende genom att ställa in förrendera export av valfri rutt eller sida till false:

exporterakonst prerender = falsk;

5. Anpassade kunddirektiv

Astro 2.5 introducerar addClientDirective API för anpassad komponenthydreringskontroll på klientsidan med hjälp av anpassad klient:* direktiv.

För att använda den här funktionen, Aktivera experimental.customClientDirectives i konfigurationsfilen och håll direktivets ingångspunkter minimala för att undvika negativ inverkan på komponentens hydrering.

En funktion av typ ClientDirective bör exporteras från din klientdirektivfil. Till exempel hydratiserar följande kod komponenten vid det första klicket på fönstret.

importera { ClientDirective } från"astro";
konst clickDirective: ClientDirective = (lasta, opts, el) => {
fönster.addEventListener(
"klick",
asynkron () => {
konst hydrat = vänta ladda();
vänta hydrat();
 },
 { en gång: Sann }
 );
};
exporterastandard clickDirective;

Nu klient: klicka kan användas i dina komponenter med full typ stöd.

Hur man installerar Astro

Astro tillhandahåller ett kommandoradsgränssnitt (CLI) som kallas skapa astro för att komma igång. Du behöver ha NodeJS 16+ och npm installerade på din maskin.

npm skapa astro@senast

Detta kommer att bygga ett nytt Astro-projekt från grunden. Följ instruktionerna på skärmen för att ställa in saker och ting (om du inte är säker på vad du ska välja, gå bara till de rekommenderade alternativen). Nästa, CD i projektmappen och kör sedan:

npm kör dev

Du kan lägga till ramverk som React, med hjälp av astro tillägg. Om allt är korrekt installerat kan du öppna lokal värd: 3000 på din maskin och du bör se meddelandet "Välkommen till Astro".

Om du ogillar NPM kan du välja något annat JavaScript-pakethanterare som Garn och PNPM.

Förbättra utvecklarupplevelsen med Astro

Allt-i-ett ramverk som Astro gör utvecklingen av snabba webbplatser så smidig som möjligt. Det är fantastiskt, UI-agnostisk natur betyder att du kan arbeta med vilket populärt JavaScript-ramverk du vill utan krångel.