5 nieuwe functies om te proberen in Astro 2.5

AstroJS is een fantastische op JavaScript gebaseerde tool die wordt gebruikt om supersnelle statische websites te maken. Hiermee kunt u websites maken met behulp van meerdere JavaScript-frameworks zoals React, Vue en Svelte. Astro 2.5 brengt een geheel nieuwe reeks functies, waarvan sommige hier worden behandeld.

1. Gegevensverzamelingen

Astro 2.5 ondersteunt nu het opslaan van JSON en YAML in collecties. De nieuwe eigenschap type: 'data' maakt deze functionaliteit mogelijk. Om dit aan te tonen, maakt u een gegevensverzameling 'schrijvers' aan in de map src/content, waar JSON of YAML bestanden kunnen worden toegevoegd.

Configureer vervolgens de collecties in src/content/config.ts met behulp van de definieerCollectie En z hulpprogramma's van astro: inhoud module en het type instellen op data.

importeren { z, definieerCollectie} van"astro: inhoud";
const schrijvers = definieerVerzameling({
type: "gegevens",
schema: z.voorwerp({ naam: z.snaar() }),
});

Exporteer ten slotte het collectieobject om uw collecties te registreren.

exporterenconst collecties = {schrijvers:schrijvers}

2. HTML-verkleining

Astro 2.5 introduceert de compressHTML-optie die alle witruimtes (en regeleinden) uit uw HTML verwijdert. Componenten worden slechts één keer gecomprimeerd door de Astro-compiler en daarna tijdens het bouwen. Dit wordt gedaan om de prestatiekosten te verlagen.

Het inschakelen van deze optie in uw project is eenvoudig. Voeg gewoon de volgende regels toe aan uw configuratiebestand. HTML-minificatie werkt alleen met componenten die zijn geschreven in het .astro-bestandsformaat.

exporterenstandaarddefinieerConfig({comprimeerHTML:WAAR})

3. Parallelle weergave

Het parallel weergeven van componenten is een langverwachte functie in Astro. In gevallen waarin onderliggende componenten in verschillende substructuren gegevens ophalen, verbetert Astro 2.5 de laadtijden door gegevens parallel op te halen.

Hierdoor kan een component verderop in de boomstructuur worden weergegeven zonder te worden geblokkeerd door een gegevensophalende component hogerop in de boomstructuur. Op dit moment werkt parallelle weergave niet goed met array.kaart asynchrone fragmenten.

Astro 2.5 brengt ook een geheel nieuwe reeks experimentele functies die hieronder worden behandeld.

4. Hybride weergave

Met Astro 2.5 kunt u nu een nieuwe serveruitvoeroptie in uw configuratiebestand definiëren die het standaard pre-rendering-gedrag van SSR overschrijft.

Stel in om te profiteren van hybride weergave hybrideUitvoer to true in het experimentele gedeelte van uw configuratie en voeg een adapter toe.

Als u dit doet, wordt uw hele site standaard vooraf weergegeven, maar u kunt zich afmelden voor dit gedrag door de voorgeven export van een route of pagina naar false:

exporterenconst prerender = vals;

5. Aangepaste klantrichtlijnen

Astro 2.5 introduceert de addClientDirective API voor aangepaste client-side componenthydratatiecontrole met behulp van custom cliënt:* richtlijnen.

Om deze functie te gebruiken, selecteert u Inschakelen experimentele.customClientDirectives in het configuratiebestand en houd richtlijningangspunten minimaal om negatieve invloed op de hydratatie van componenten te voorkomen.

Een functie van het type Cliëntrichtlijn moet worden geëxporteerd vanuit uw clientdirectivebestand. De volgende code hydrateert bijvoorbeeld de component bij de eerste klik op het venster.

importeren { ClientDirective } van"astro";
const clickDirective: ClientDirective = (laden, kiezen, el) => {
raam.addEventListener(
"Klik",
asynchroon () => {
const hydrateren = wachten laden();
wachten hydrateren();
 },
 { eenmaal: WAAR }
 );
};
exporterenstandaard clickDirective;

Nu klant: klik kan worden gebruikt in uw componenten met volledige ondersteuning van het type.

Astro installeren

Astro biedt een Command Line Interface (CLI) genaamd astro maken om u op weg te helpen. Je moet hebben NodeJS 16+ en npm op uw machine geïnstalleerd.

npm maak astro@laatste

Dit zal een nieuw Astro-project vanaf het begin ondersteunen. Volg de instructies op het scherm om dingen in te stellen (als u niet zeker weet wat u moet kiezen, kiest u gewoon de aanbevolen opties). Volgende, CD in de projectmap en voer vervolgens uit:

npm run dev

U kunt frameworks zoals React toevoegen met behulp van astro toevoegen. Als alles correct is geïnstalleerd, kunt u openen lokale host: 3000 op uw computer en u zou een bericht "Welkom bij Astro" moeten zien.

Als je een hekel hebt aan NPM, kun je kiezen voor een andere JavaScript-pakketbeheerders zoals garen en PNPM.

Ontwikkelaarservaring verbeteren met Astro

Alles-in-één Frameworks zoals Astro maken het ontwikkelen van snelle websites zo soepel mogelijk. Het is fantastisch, UI-agnostisch karakter betekent dat u probleemloos kunt werken met elk populair JavaScript-framework van uw keuze.