Astro-Kurs 25: Astro Islands verstehen

Modul 5 – Webseiten erweitern · Astro-Anfängerkurs der Know-How-Schmiede

Voraussetzung: Etappe 1 und 2 des Kurses. Das Beispielprojekt „Meine Modellbau-Werkstatt“ wird fortgeführt. Kopiere Code nicht blind über schon vorhandene Seiten, sondern ergänze bestehende Bereiche.

Lernziele

Du weißt, warum Astro normalerweise wenig Browser-JavaScript sendet, was „Hydration“ bedeutet und wann client:load oder client:visible sinnvoll ist.

1. Das Prinzip

Unsere Projekttexte bleiben statisches HTML. Nur ein kleiner interaktiver Bereich benötigt Laufzeitcode. Astro kann dafür Komponenten aus React, Preact, Vue oder Svelte gezielt laden. Das bezeichnet man als Islands Architecture.

Wichtig: Eine normale .astro-Komponente mit einem <script> (wie in Teil 23) benötigt keine client:*-Direktive. Diese Direktiven sind für unterstützte UI-Framework-Komponenten gedacht.

2. Kleines React-Beispiel (freiwillige Erweiterung)

Installiere zunächst die React-Integration:

npx astro add react

Lege src/components/KlickZaehler.jsx an:

import { useState } from 'react';
export default function KlickZaehler() {
  const [anzahl, setAnzahl] = useState(0);
  return <button type="button" onClick={() => setAnzahl(n => n + 1)}>
    Klicks: {anzahl}
  </button>;
}

Binde ihn in src/pages/projekte.astro im Frontmatter ein:

---
import Layout from '../layouts/Layout.astro';
import KlickZaehler from '../components/KlickZaehler.jsx';
---
<Layout title="Projekte">
  <h1>Meine Projekte</h1>
  <KlickZaehler client:load />
</Layout>

Dieses minimalistische Seitenbeispiel dient zum Test. Wenn du schon eine Projekte-Seite hast, ergänze nur Import und Komponente, statt die Seite zu überschreiben.

3. Welche Ladeart ist richtig?

• client:load: sobald wie möglich für sofort benötigte Interaktion.
• client:idle: wenn der Browser Zeit hat.
• client:visible: wenn die Komponente in den sichtbaren Bereich kommt.
• client:only="react": Rendering ausschließlich im Browser (hier nur bei wirklichem Bedarf).

Verwende Framework-Komponenten sparsam: Die zusätzliche Laufzeitbibliothek kostet Ladezeit.

Übung

Setze client:visible statt client:load und teste den Zähler weiter unten auf einer langen Seite.