5 nye funksjoner å prøve i Astro 2.5

AstroJS er et fantastisk JavaScript-basert verktøy som brukes til å lage superraske statiske nettsteder. Den lar deg lage nettsteder ved å bruke flere JavaScript-rammer som React, Vue og Svelte. Astro 2.5 har et helt nytt sett med funksjoner, hvorav noen vil bli dekket her.

1. Datainnsamlinger

Astro 2.5 støtter nå lagring av JSON og YAML i samlinger. Den nye typen: 'data'-egenskapen aktiverer denne funksjonaliteten. For å demonstrere dette, lag en 'writers'-datasamling i src/content-mappen, hvor JSON eller YAML filer kan legges til.

Deretter konfigurerer du samlingene i src/content/config.ts ved å bruke defineCollection og z verktøy fra astro: innhold modul og angi typen til data.

import { z, defineCollection } fra"astro: innhold";
konst writers = defineCollection({
type: "data",
skjema: z.gjenstand({ Navn: z.streng() }),
});

Til slutt eksporterer du samlingsobjektet for å registrere samlingene dine.

eksportkonst samlinger = {forfattere:writers}

2. HTML-minifisering

Astro 2.5 introduserer compressHTML-alternativet som fjerner alle mellomrom (og linjeskift) fra HTML-en din. Komponenter komprimeres bare én gang av Astro-kompilatoren og deretter under bygging. Dette gjøres for å redusere ytelseskostnadene.

Det er enkelt å aktivere dette alternativet i prosjektet ditt. Bare legg til følgende linjer i konfigurasjonsfilen. HTML Minification fungerer bare med komponenter skrevet i .astro-filformatet.

eksportmisligholdedefinereConfig({komprimere HTML:ekte})

3. Parallellisert gjengivelse

Å gjengi komponenter parallelt er en etterlengtet funksjon i Astro. I tilfeller der underordnede komponenter i forskjellige undertrær henter data, forbedrer Astro 2.5 lastetidene ved å hente data parallelt.

Dette gjør at en komponent lenger ned i treet kan gjengis uten å bli blokkert av en datahentingskomponent høyere opp i treet. For øyeblikket fungerer ikke parallell gjengivelse riktig med array.map asynkrone fragmenter.

Astro 2.5 har også et helt nytt sett med eksperimentelle funksjoner som er dekket nedenfor.

4. Hybrid gjengivelse

Astro 2.5 lar deg nå definere et nytt serverutgangsalternativ i konfigurasjonsfilen som overstyrer standard pre-rendering-atferd til SSR.

For å dra nytte av hybrid gjengivelse, still inn hybridutgang til sant i den eksperimentelle delen av konfigurasjonen og legg til en adapter.

Hvis du gjør dette, vil hele nettstedet ditt forhåndsgjengis som standard, men du kan velge bort denne oppførselen ved å angi forhåndsgjengivelse eksport av hvilken som helst rute eller side til false:

eksportkonst prerender = falsk;

5. Tilpassede kundedirektiver

Astro 2.5 introduserer addClientDirective API for tilpasset komponenthydreringskontroll på klientsiden ved hjelp av tilpasset klient:* direktiver.

Aktiver for å bruke denne funksjonen experimental.customClientDirectives i konfigurasjonsfilen og hold direktivinngangspunkter minimale for å unngå negativ innvirkning på komponenthydrering.

En funksjon av typen Kundedirektiv skal eksporteres fra klientdirektivfilen. Følgende kode hydrerer for eksempel komponenten ved første klikk på vinduet.

import { ClientDirective } fra"astro";
konst clickDirective: ClientDirective = (laste, opts, el) => {
vindu.addEventListener(
"klikk",
asynkron () => {
konst hydrat = avvente laste();
avvente hydrat();
 },
 { en gang: sant }
 );
};
eksportmisligholde clickDirective;

Nå klient: klikk kan brukes i komponentene dine med full type støtte.

Hvordan installere Astro

Astro gir et kommandolinjegrensesnitt (CLI) kalt lage astro for å komme i gang. Du må ha NodeJS 16+ og npm installert på maskinen din.

npm lage astro@siste

Dette vil stillas et nytt Astro-prosjekt fra bunnen av. Følg instruksjonene på skjermen for å sette opp ting (hvis du ikke er sikker på hva du skal velge, bare gå med de anbefalte alternativene). Neste, cd inn i prosjektmappen, og kjør deretter:

npm kjøre dev

Du kan legge til rammer som React, ved å bruke astro legge til. Hvis alt er riktig installert kan du åpne lokal vert: 3000 på maskinen din, og du bør se en "Velkommen til Astro"-melding.

Hvis du misliker NPM, kan du velge andre JavaScript-pakkeadministratorer som Garn og PNPM.

Forbedre utvikleropplevelsen med Astro

Alt-i-ett-rammeverk som Astro gjør utviklingen av raske nettsider så smidig som mulig. Det er fantastisk, UI-agnostisk natur betyr at du kan jobbe med et hvilket som helst populært JavaScript-rammeverk du ønsker uten problemer.