Gatsby

Was ist Gatsby?

Gatsby ist ein Open-Source-Framework auf Basis von React zum Bau von Websites. Es führt Inhalte aus Dateien, einem CMS oder APIs in einer GraphQL-Datenschicht zusammen, rendert die Seiten zur Build-Zeit zu statischem HTML und ergänzt auf dem Client React. Gatsby 5 ist die aktuelle Hauptversion (5.16 zum Zeitpunkt dieses Textes), und Netlify, das Gatsby 2023 übernommen hat, betreibt das Projekt heute.

So funktioniert Gatsby

1. Quelle: Plugins lesen Inhalte aus Markdown-Dateien, einem Headless-CMS oder einer API und machen daraus Knoten in der Datenschicht von Gatsby.
2. Abfrage: Seiten und Komponenten fragen mit GraphQL genau die Daten ab, die sie brauchen, per Page Query oder mit dem Hook useStaticQuery. Gatsby leitet ein Schema aus den Daten ab, das sich per Schema Customization überschreiben lässt.
3. Build: Gatsby rendert jede Seite zu HTML und bündelt das JavaScript, eine Form der statischen Seitengenerierung.
4. Ausliefern und Hydrieren: Die HTML-Dateien liegen auf einem CDN oder einem beliebigen statischen Host, und im Browser übernimmt React die Seite per Hydration, sodass sie sich wie eine normale React-App verhält.

Laut gatsbyjs.com unterstützt Gatsby auch Server-Side Rendering, Deferred Static Generation (DSG) und Serverless-Funktionen für Seiten, die sich nicht komplett vorab bauen lassen.

Wo Gatsby heute steht

Bleiben Sie bei der Wahl realistisch. Netlify hat Gatsby 2023 übernommen und Gatsby Cloud, das kostenpflichtige Hosting-Produkt, eingestellt und die Kunden zu Netlify überführt. Netlify erklärte, das Open-Source-Framework werde weiter gepflegt. Es erscheinen weiterhin Releases, aber langsamer als in den frühen Jahren, und die Community stellt Fragen zur Roadmap. Vergleichen Sie es bei einem neuen Projekt mit Next.js, Astro, Hugo oder Eleventy. Prüfen Sie bei einer bestehenden Gatsby-Seite vor einem Upgrade, vor allem von Gatsby 4 auf 5, ob Ihre Plugins noch funktionieren.

Beispiel

Eine Dokumentationsseite speichert Anleitungen als Markdown. Ein Source-Plugin macht aus jeder Datei einen Knoten, eine Seitenvorlage fragt Titel und Text per GraphQL ab, und zur Build-Zeit schreibt Gatsby eine HTML-Datei pro Anleitung. Besucher erhalten fertiges HTML von einem CDN, was den Largest Contentful Paint niedrig hält, wenn Bilder und Skripte im Griff bleiben.

Häufige Fehler

• Langsame Builds ignorieren. Tausende Seiten und aufwendige Bildverarbeitung verlängern Builds. Nutzen Sie Caching, begrenzen Sie, was neu gebaut wird, und beobachten Sie die Build-Zeit.
• Zu viele Plugins. Jedes Plugin bringt JavaScript, Build-Zeit und Upgrade-Risiko mit. Behalten Sie nur, was Sie nutzen.
• Große Client-Bundles. Statisches HTML hilft wenig, wenn das JavaScript zur Hydration schwer ist. Legen Sie ein Performance-Budget für die Bundle-Größe fest.
• "Statisch" mit "kein Backend" gleichsetzen. Suche, Formulare, Logins und Vorschauen rufen APIs und Funktionen auf, die eigene Kapazität und eigene Tests brauchen.
• Das Tempo des Projekts nicht einplanen. Fixieren Sie Versionen und halten Sie einen getesteten Upgrade-Pfad bereit.

Bezug zu Performance-Tests und Monitoring

Eine statische Gatsby-Seite ist günstig auszuliefern, das Risiko liegt daher meist in den dynamischen Teilen: APIs, Serverless-Funktionen und Skripte von Drittanbietern. Nutzen Sie LoadFocus Load Testing für diese Endpunkte, aus 25 Cloud-Regionen. Der kostenlose Core-Web-Vitals-Checker zeigt, wie echte Chrome-Nutzer die Seite erleben, und das Page-Speed-Monitoring erkennt Rückschritte nach jedem Deployment. Frontend-Maßnahmen für jedes Framework finden Sie in der 10-Schritte-Anleitung für schnellere Websites (auf Englisch).

Häufige Fragen: Gatsby

Wird Gatsby noch gepflegt?

Ja, das Open-Source-Projekt veröffentlicht weiterhin Releases, mit Gatsby 5 als aktueller Hauptversion. Tempo und Roadmap sind langsamer als früher, prüfen Sie es daher gegen Ihre langfristigen Anforderungen.

Braucht Gatsby GraphQL?

Die Datenschicht von Gatsby ist GraphQL, und Komponenten fragen sie meist zur Build-Zeit ab. Daten lassen sich auch im Browser laden, wie in jeder React-App.

Was ist aus Gatsby Cloud geworden?

Netlify hat Gatsby Cloud nach der Übernahme eingestellt und den Kunden Wege zu Netlify angeboten. Das Open-Source-Framework ist davon getrennt und läuft weiterhin bei jedem Hoster.

Ist Gatsby gut für SEO?

Die Seiten sind vorgerendertes HTML, das Suchmaschinen leicht lesen. Das Ranking hängt dennoch von Inhalt, Geschwindigkeit und Struktur ab, nicht allein vom Framework.

Muss ich eine Gatsby-Seite lasttesten?

Testen Sie die dynamischen Teile, von denen sie abhängt, etwa APIs, Funktionen und den Checkout. Die statischen Seiten selbst liefert ein CDN aus.