Webframework: Astro 5.3 beschleunigt das Rendering von Webseiten

Das Webframework verändert das Rendering von Komponenten, was insbesondere bei komplexen Webseiten eine höhere Geschwindigkeit erzielen soll.

14

(Bild: Grisha Bruev/Shutterstock.com)

17.02.2025, 11:27 Uhr

Lesezeit: 2 Min.

Developer

Von

Maika Möbus

In Version 5.2 erlaubt das JavaScript-Framework Astro ein schnelleres Seitenrendering – vor allem für Webseiten mit vielen Komponenten – und es erweitert den Netlify-Adapter um zwei neue Optionen für das Bundling.

Komplexe Seiten schneller rendern

In Astro lassen sich async-Funktionen innerhalb von Komponenten verwenden. Bisher wurden jede Komponente und jede Seite asynchron gerendert, selbst wenn das nicht nötig war, was laut dem Astro-Team zu einigem Overhead führen konnte. Daher bringt Astro 5.3 die Änderung, dass es eine Komponente nur dann asynchron rendert, wenn sie tatsächlich einen async-Funktionsaufruf enthält.

Das soll zu deutlich schnellerem Rendering von synchronen Komponenten führen, wobei der exakte Grad der Beschleunigung von der individuellen Webseite abhängt. Komplexe Seiten mit vielen Komponenten sollen davon am meisten profitieren können. Dagegen sollen beispielsweise Seiten, die langsame externe APIs zur Anfragezeit verwenden, möglicherweise keine Geschwindigkeitsänderung aufweisen.

Wie das Astro-Team getestet hat, sind mit dem neuen Verfahren die Antwortzeiten beim serverseitigen Rendern (SSR) grundsätzlich 1,5- bis 2-mal schneller, sofern die Seite keine externen APIs aufruft. Die statische Build-Zeit der Astro-Dokumentationsseite ließ sich um 10 bis 15 Prozent reduzieren und im Platformatic-SSR-Benchmark, der eine Seite mit über 3000 Komponenten generiert, laufen Anfragen nun viermal schneller ab.

Um das neue Rendering-Verhalten zu nutzen, brauchen Entwicklerinnen und Entwickler selbst keine Anpassungen vorzunehmen.

Enterprise-JavaScript-Konferenz enterJS 2025, 7. und 8. Mai in Mannheim — (Bild: WD Ashari/Shutterstock.com)

Die enterJS 2025 findet am 7. und 8. Mai in Mannheim statt. Die Konferenz bietet einen umfassenden Blick auf die JavaScript-gestützte Enterprise-Welt. Der Fokus liegt nicht nur auf den Programmiersprachen JavaScript und TypeScript selbst, sondern auch auf Frameworks und Tools, Accessibility, Praxisberichten, UI/UX und Security.

Highlights aus dem Programm:

Tickets sind zum Frühbucherpreis im Online-Shop erhältlich.

Updates für HEAD-Anfragen und Netflify-Anbindung

API-Endpunkte können nun automatisch mit HEAD-Anfragen umgehen, wenn ein GET-Handler definiert ist. Astro ruft Letzteren auf und gibt die Antwort mit leerem Body zurück. Entwicklerinnen und Entwickler, die einen anderen Umgang mit HEAD-Anfragen bevorzugen, können weiterhin einen separaten Handler festlegen.

Zudem erhalten Developer mehr Kontrolle über das Bundling mit der Serverless-Plattform Netflify. Der Vercel-Adapter besaß bereits die Optionen excludeFiles und includeFiles, um zu definieren, welche Dateien das Bundle nicht enthalten beziehungsweise enthalten soll. Nun zieht der Netflify-Adapter nach und erhält ebenfalls diese Optionen. Sie akzeptieren ein Array von Globs oder Pfaden:

  {
    adapter: netlify({
      includeFiles: ["src/locales/**/*.po"],
      excludeFiles: ["node_modules/big-package/chonky-file.bin"],
    }),
  }

Bestehende Astro-Projekte lassen sich per automatisiertem CLI-Tool @astrojs/upgrade auf die neue Version aktualisieren. Ein manuelles Aktualisieren ist ebenfalls möglich.

Weitere Informationen zum neuen Release liefert der Astro-Blog.