5 funcții noi de încercat în Astro 2.5

AstroJS este un instrument fantastic bazat pe JavaScript folosit pentru a crea site-uri web statice superrapide. Vă permite să creați site-uri web folosind mai multe cadre JavaScript precum React, Vue și Svelte. Astro 2.5 aduce un set complet nou de caracteristici, dintre care unele vor fi acoperite aici.

1. Colecții de date

Astro 2.5 acceptă acum stocarea JSON și YAML în colecții. Noul tip: proprietatea „date” activează această funcționalitate. Pentru a demonstra acest lucru, creați o colecție de date „scriitori” în folderul src/content, unde JSON sau YAML fișierele pot fi adăugate.

Apoi, configurați colecțiile în src/content/config.ts folosind defineColecție și z utilitati din astro: continut modul și setarea tipului la date.

import { z, defineCollection } din„astro: conținut”;
const scriitori = defineColection({
tip: "date",
schemă: z.obiect({ Nume: z.şir() }),
});

În cele din urmă, exportați obiectul colecției pentru a vă înregistra colecțiile.

exportconst colecții = {scriitori:scriitori}

2. Minificare HTML

Astro 2.5 introduce opțiunea compressHTML care elimină toate spațiile albe (și întreruperile de linie) din HTML. Componentele sunt comprimate o singură dată de către compilatorul Astro și apoi în timpul construirii. Acest lucru se face pentru a reduce costurile de performanță.

Activarea acestei opțiuni în proiectul dvs. este ușoară. Doar adăugați următoarele linii în fișierul dvs. de configurare. Minificarea HTML funcționează numai cu componentele scrise în formatul de fișier .astro.

exportMod implicitdefineConfig({comprima HTML:Adevărat})

3. Redare paralelă

Redarea componentelor în paralel este o caracteristică mult așteptată în Astro. În cazurile în care componentele secundare din diferite sub-arbori preiau date, Astro 2.5 îmbunătățește timpii de încărcare prin preluarea datelor în paralel.

Acest lucru permite ca o componentă mai jos în arbore să fie redată fără a fi blocată de o componentă de preluare a datelor mai sus în arbore. În acest moment, redarea paralelă nu funcționează corect cu matrice.hartă fragmente asincrone.

Astro 2.5 aduce, de asemenea, un set complet nou de caracteristici experimentale care sunt acoperite mai jos.

4. Redare hibridă

Astro 2.5 vă permite acum să definiți o nouă opțiune de ieșire a serverului în fișierul dvs. de configurare, care înlocuiește comportamentul implicit de pre-rendare al SSR.

Pentru a profita de randarea hibridă, setați ieșire hibridă la true în secțiunea experimentală a configurației dvs. și adăugați un adaptor.

Procedând astfel, întregul site va fi redat în mod prestabilit, dar puteți renunța la acest comportament setând opțiunea predare exportul oricărei rute sau pagini la false:

exportconst prerander = fals;

5. Directive personalizate pentru clienți

Astro 2.5 introduce API-ul addClientDirective pentru controlul personalizat al hidratării componentelor pe partea clientului folosind personalizarea client:* directive.

Pentru a utiliza această funcție, activați experimental.CustomClientDirectives în fișierul de configurare și păstrați punctele de intrare la nivel minim pentru a evita orice impact negativ asupra hidratării componentelor.

O funcție de tip ClientDirective ar trebui să fie exportat din fișierul de directive client. De exemplu, următorul cod hidratează componenta la primul clic pe fereastră.

import { ClientDirective } din"astro";
const clickDirective: ClientDirective = (load, opts, el) => {
fereastră.addEventListener(
"clic",
asincron () => {
const hidrat = asteapta sarcină();
asteapta hidrat();
 },
 { o singura data: Adevărat }
 );
};
exportMod implicit clickDirective;

Acum client: click poate fi utilizat în componentele dvs. cu suport de tip complet.

Cum se instalează Astro

Astro oferă o interfață de linie de comandă (CLI) numită crea astro ca să te începi. trebuie sa ai NodeJS 16+ și npm instalat pe mașina dvs.

npm crea astro@cele mai recente

Acest lucru va schelă un nou proiect Astro de la zero. Urmați instrucțiunile de pe ecran pentru a configura lucrurile (dacă nu sunteți sigur ce să alegeți, mergeți cu opțiunile recomandate). Următorul, CD în folderul de proiect, apoi rulați:

npm run dev

Puteți adăuga cadre precum React, folosind astro add. Dacă totul este instalat corect, puteți deschide gazdă locală: 3000 pe aparat și ar trebui să vedeți un mesaj „Bine ați venit la Astro”.

Dacă nu vă place NPM, puteți opta pentru altele Manageri de pachete JavaScript precum Yarn și PNPM.

Îmbunătățirea experienței dezvoltatorilor cu Astro

Framework-urile all-in-one precum Astro fac ca dezvoltarea site-urilor rapide să fie cât mai fluidă posibil. Natura fantastică, agnostică a interfeței de utilizare înseamnă că puteți lucra cu orice cadru JavaScript popular la alegere, fără probleme.