5 neue Funktionen zum Ausprobieren in Astro 2.5

AstroJS ist ein fantastisches JavaScript-basiertes Tool zum Erstellen superschneller statischer Websites. Sie können damit Websites mit mehreren JavaScript-Frameworks wie React, Vue und Svelte erstellen. Astro 2.5 bietet eine ganze Reihe neuer Funktionen, von denen einige hier behandelt werden.

1. Datensammlungen

Astro 2.5 unterstützt jetzt das Speichern von JSON und YAML in Sammlungen. Die neue Eigenschaft type: „data“ ermöglicht diese Funktionalität. Um dies zu demonstrieren, erstellen Sie eine „writers“-Datensammlung im Ordner src/content JSON oder YAML Dateien können hinzugefügt werden.

Als nächstes konfigurieren Sie die Sammlungen in src/content/config.ts mithilfe von defineCollection Und z Dienstprogramme von Astro: Inhalt Modul und Setzen des Typs auf Daten.

importieren { z, defineCollection } aus„Astro: Inhalt“;
const Writers = defineCollection({
Typ: "Daten",
Schema: z.Objekt({ Name: z.Zeichenfolge() }),
});

Exportieren Sie abschließend das Sammlungsobjekt, um Ihre Sammlungen zu registrieren.

Exportconst Sammlungen = {Schriftsteller:Autoren}

2. HTML-Minimierung

Astro 2.5 führt die Option compressHTML ein, die alle Leerzeichen (und Zeilenumbrüche) aus Ihrem HTML entfernt. Komponenten werden nur einmal vom Astro-Compiler und dann während des Builds komprimiert. Dies geschieht, um die Leistungskosten zu senken.

Die Aktivierung dieser Option in Ihrem Projekt ist einfach. Fügen Sie einfach die folgenden Zeilen zu Ihrer Konfigurationsdatei hinzu. Die HTML-Minifizierung funktioniert nur mit Komponenten, die im .astro-Dateiformat geschrieben sind.

ExportStandarddefineConfig({compressHTML:WAHR})

3. Parallelisiertes Rendering

Das parallele Rendern von Komponenten ist eine lang erwartete Funktion in Astro. In Fällen, in denen untergeordnete Komponenten in verschiedenen Unterbäumen Daten abrufen, verbessert Astro 2.5 die Ladezeiten durch paralleles Abrufen von Daten.

Dadurch kann eine Komponente weiter unten im Baum gerendert werden, ohne dass sie von einer Datenabrufkomponente weiter oben im Baum blockiert wird. Im Moment funktioniert das parallele Rendern nicht richtig array.map asynchrone Fragmente.

Astro 2.5 bietet außerdem eine ganze Reihe neuer experimenteller Funktionen, die im Folgenden behandelt werden.

4. Hybrid-Rendering

Mit Astro 2.5 können Sie jetzt eine neue Serverausgabeoption in Ihrer Konfigurationsdatei definieren, die das Standardverhalten von SSR vor dem Rendern außer Kraft setzt.

Um die Vorteile des Hybrid-Renderings zu nutzen, legen Sie fest hybridOutput auf „true“ im experimentellen Abschnitt Ihrer Konfiguration und fügen Sie einen Adapter hinzu.

Dadurch wird Ihre gesamte Website standardmäßig vorab gerendert. Sie können dieses Verhalten jedoch deaktivieren, indem Sie Folgendes festlegen Vorrendern Export einer beliebigen Route oder Seite nach false:

Exportconst prerender = FALSCH;

5. Benutzerdefinierte Client-Anweisungen

Astro 2.5 führt die addClientDirective-API für die benutzerdefinierte clientseitige Hydratationssteuerung von Komponenten mithilfe von Custom ein Klient:* Richtlinien.

Um diese Funktion zu verwenden, aktivieren Sie sie experimentell.customClientDirectives in der Konfigurationsdatei und halten Sie die Einstiegspunkte der Direktive minimal, um negative Auswirkungen auf die Komponentenhydratation zu vermeiden.

Eine Funktion vom Typ ClientDirective sollte aus Ihrer Client-Anweisungsdatei exportiert werden. Der folgende Code hydriert beispielsweise die Komponente beim ersten Klick auf das Fenster.

importieren { ClientDirective } aus„Astro“;
const clickDirective: ClientDirective = (Last, Optionen, el) => {
Fenster.addEventListener(
"klicken",
asynchron () => {
const Hydrat = erwarten Belastung();
erwarten Hydrat();
 },
 { einmal: WAHR }
 );
};
ExportStandard clickDirective;

Jetzt Kunde: klicken kann in Ihren Komponenten mit vollständiger Typunterstützung verwendet werden.

So installieren Sie Astro

Astro bietet eine Befehlszeilenschnittstelle (CLI) namens Astro erstellen um Ihnen den Einstieg zu erleichtern. Du brauchst NodeJS 16+ und npm auf Ihrem Computer installiert.

npm erstellt Astro@neueste

Dies wird ein neues Astro-Projekt von Grund auf aufbauen. Befolgen Sie die Anweisungen auf dem Bildschirm, um die Dinge einzurichten (wenn Sie nicht sicher sind, was Sie auswählen sollen, wählen Sie einfach die empfohlenen Optionen). Nächste, CD in den Projektordner und führen Sie dann Folgendes aus:

npm run dev

Sie können Frameworks wie React hinzufügen, indem Sie Astro hinzufügen. Wenn alles korrekt installiert ist, können Sie es öffnen localhost: 3000 auf Ihrem Computer und Sie sollten die Meldung „Willkommen bei Astro“ sehen.

Wenn Ihnen NPM nicht gefällt, können Sie sich für ein anderes entscheiden JavaScript-Paketmanager wie Garn und PNPM.

Verbessern Sie die Entwicklererfahrung mit Astro

All-in-One-Frameworks wie Astro machen die Entwicklung schneller Websites so reibungslos wie möglich. Dank der fantastischen UI-unabhängigen Natur können Sie problemlos mit jedem gängigen JavaScript-Framework Ihrer Wahl arbeiten.