blog

Astro.js

Astro.js ist ein Web-Framework zum bauen schneller, content-fokusierter Websites.
Der Clou, die server-first Island-Architektur schiebt die Arbeitslast dahin wo sie hingehört:
zurück zum Server. Standardmäßig liefert Astro kein Javascript an den Client aus.

Was ist die Island-Architecktur

Die Idee der ”Island-Architecktur” wurde erstmals von der Frontend-Architektin von Etsy,
Katie Sylor-Miller, im Jahr 2019 geprägt und in diesem Beitrag von Preact-Erfinder Jason Miller weiter ausgeführt.

Ein Island ist interaktive UI-Komponente auf einer ansonsten statischen HTML-Seite. So lassen sich Komponenten mit React, Preact, Svelte, Vue, SolidJS, AlpineJS, oder Lit erstellen und einfach einbinden. Mit hilfe der client:* Direktive lässt sich steuern wie die Komponente auf der Seite geladen werden. Zum Beispiel wird eine Komponente erst geladen wenn sie auf dem Viewport erscheint.

*.astro

---
import InteractiveContactForm from '../components/InteractiveContactForm.svelte';
---
// "client:load" ships the component with javascript
<InteractiveContactForm translations={translations} client:load>
  <h3>Kontaktform</h3>
</InteractiveContactForm>

Meine Erfahrungen mit Astro

Für das Neuaufsetzen von justpm.de habe ich auf Astro gesetzt

(+) Vorteile

• kein Javascript out of the box
• schnell