Gatsby: ein React-Framework für statisches und dynamisches Rendering

Ein React-Framework für Websites, die sich wie Apps verhalten

Gatsby ist ein kostenloses und Open-Source-Framework, das auf React basiert. Das README beschreibt es als Kombination aus der Kontrolle und Skalierbarkeit dynamisch gerenderter Websites mit der Geschwindigkeit der statischen Website-Generierung. Es richtet sich an professionelle Entwickler, die wartbare, inhaltsreiche und leistungsstarke Websites benötigen. Das Repository ist ein mit Lerna verwaltetes Monorepo, was bedeutet, dass mehrere Pakete in einer Codebasis leben und separat auf npm veröffentlicht werden. Das README betont, dass Gatsby-Websites voll funktionsfähige React-Apps sind, nicht nur statische Seiten, sodass sie Blogs, E-Commerce und Benutzer-Dashboards unterstützen können. Es listet auch Datenladung, Rendering-Optionen, integrierte Leistung, einen modernen Stack und kostengünstiges Hosting als Schlüsselfunktionen auf. Die Homepage des Projekts ist gatsbyjs.com, und der Standard-Branch ist master.

Daten aus jeder Quelle, abgefragt über eine einheitliche GraphQL-Schicht

Gatsbys Datenverarbeitung ist um Quell-Plugins herum aufgebaut. Sie können Inhalte aus Markdown-Dateien, Headless-CMS wie Contentful oder WordPress sowie REST- oder GraphQL-APIs abrufen. Nach dem Laden werden alle Daten über Gatsbys einheitliche GraphQL-Schnittstelle bereitgestellt, sodass Komponenten unabhängig von der Quelle dieselbe Schnittstelle abfragen. Das entkoppelt die Inhaltsquelle von der Rendering-Schicht und gibt Teams einen konsistenten Workflow, auch wenn die Backends unterschiedlich sind. Das README sagt ausdrücklich "Daten von überall laden" und betont, Quell-Plugins zum Laden von Daten zu verwenden und dann gegen Gatsbys GraphQL-Schnittstelle zu entwickeln. Es weist auch an: "Verwenden Sie Quell-Plugins, um Ihre Daten zu laden, und entwickeln Sie dann mit Gatsbys einheitlicher GraphQL-Schnittstelle." Das ist ein Kernunterschied: Die Datenquelle bestimmt nicht das Abfragemodell.

Rendering-Optionen pro Seite: SSG, DSG und SSR

Gatsby unterstützt drei Rendering-Optionen: Static Site Generation (SSG), Deferred Static Generation (DSG) und Server-Side Rendering (SSR). Die Wahl erfolgt pro Seite, nicht pro Projekt. Diese granulare Kontrolle ermöglicht es, die Geschwindigkeit der statischen Generierung für die meisten Seiten beizubehalten und bei Bedarf dynamisches Rendering zu wählen, ohne die gesamte Website als einen Modus zu behandeln. Das README nennt diese "alternative Rendering-Optionen" und sagt, sie existieren "pro Seite", was Optimierung für Leistung und Produktivität ermöglicht, ohne das eine für das andere zu opfern. Es verlinkt auf konzeptionelle Dokumentation unter gatsbyjs.com/docs/conceptual/rendering-options/. Das ist flexibler als eine binäre statisch-oder-dynamisch-Entscheidung.

Integrierte Leistungsarbeit

Das README sagt, Leistung sei eingebaut. Gatsby automatisiert Code-Splitting, Bildoptimierung, Inlining kritischer Styles, Lazy-Loading und Prefetching von Ressourcen. Die Behauptung ist, dass dies standardmäßig geschieht, ohne manuelle Abstimmung. Das README liefert keine Benchmark-Zahlen oder Audit-Scores; es beschreibt diese Mechanismen als Teil des beabsichtigten Verhaltens des Frameworks. Es sagt "Bestehen Sie Ihre Leistungsaudits standardmäßig", zitiert aber keine spezifischen Ergebnisse. Dieser Satz ist eine Behauptung des Projekts, keine gemessene Garantie. Die aufgeführten Mechanismen sind konkret: Code-Splitting, Bildoptimierung, Inlining kritischer Styles, Lazy-Loading und Prefetching. Das README fügt nach Prefetching "und mehr" hinzu, listet aber nicht auf, was sonst noch.

Hosting und der Schnellstart-Pfad

Gatsby-Websites benötigen keine Server und können daher vollständig auf einem CDN gehostet werden, was die Kosten niedrig hält. Das README erwähnt Netlify als Beispiel für einen Dienst, auf dem viele Gatsby-Websites kostenlos gehostet werden können. Der Schnellstart-Ablauf enthält einen Link zum Bereitstellen einer Website auf Netlify, wonach Sie drei Ergebnisse erhalten: eine funktionierende Website auf Netlify, ein neues Repository, das mit dieser Website verknüpft ist, und automatische Neuerstellung und Neubereitstellung, wenn Sie Änderungen an Ihr neues Repository pushen. Der lokale Entwicklungspfad verwendet npm init gatsby, um ein Projekt zu initialisieren, und dann npm run develop im neuen Verzeichnis. Die Website läuft unter http://localhost:8000, und das Bearbeiten von src/pages/index.js löst ein Echtzeit-Update im Browser aus. Das README listet keine anderen Hosting-Anbieter außer Netlify auf.

Projektstruktur, Dokumentation und Lizenz

Das Repository ist ein mit Lerna verwaltetes Monorepo mit mehreren Paketen im packages-Verzeichnis. Das README verlinkt Migrationsanleitungen für den Wechsel von v2 zu v3, v3 zu v4 und v4 zu v5 sowie Versionshinweise und Dokumentation zur Versionsunterstützung. Es verweist auch auf ein Tutorial und eine Dokumentationsseite und empfiehlt den meisten Entwicklern, mit dem ausführlichen Tutorial zu beginnen. Beitragsrichtlinien, ein Verhaltenskodex und ein "So tragen Sie bei"-Dokument sind verlinkt. Das Projekt wird unter der MIT-Lizenz veröffentlicht. Die Lizenz gewährt das Recht, Kopien zu verwenden, zu kopieren, zu modifizieren, zu fusionieren, zu veröffentlichen, zu verteilen, zu unterlizenzieren und zu verkaufen, und besagt, dass die Software "wie besehen" ohne jegliche Gewährleistung bereitgestellt wird. Der Lizenztext behandelt keine Unterstützung, Sicherheit oder Produktionsbereitschaft; diese fallen nicht unter die Lizenz.

Redaktionelles Fazit

Das README beschreibt Gatsby als ein React-Framework, das statisches und dynamisches Rendering kombiniert, Datenquellen hinter GraphQL abstrahiert und mehrere Leistungsmechanismen automatisiert. Das README liefert keine Benchmarks, Sicherheitsgarantien oder eine Liste unterstützter Hosts über Netlify hinaus; diese bleiben offene Verifikationsfragen.

Offizielle Quellen

1. Official documentation
2. Official README
3. Project repository
4. Release notes