Gatsby.js oder Next.js – welches solltest du verwenden?

Du willst eine neue Website für dein Unternehmen oder sogar eine vollwertige Anwendung erstellen und suchst das beste Tool dafür? Wenn du JavaScript Developer bist oder dich mit der Entwicklung auskennst, bist du mit diesen beiden Toolkits bestens bedient! Bevor wir in einen detaillierteren Vergleich einsteigen, möchte ich dir die grundlegenden Konzepte hinter diesen Lösungen vorstellen. Wenn du ein erfahrener Developer bist und die Basics bereits kennst, kannst du die nächsten zwei Absätze gern überspringen.

Was ist Gatsby.js?

Laut ihrer Homepage: "Gatsby ist ein kostenloses Open-Source-Framework auf Basis von React, das Entwicklern hilft, blitzschnelle Websites und Apps zu erstellen."

Der Hauptfokus liegt darauf, hohe Performance zu ermöglichen, indem statische HTML-Seiten generiert werden. Kombiniert man das mit integrierter PWA-Unterstützung, dem Ausliefern nur der kritischen Assets beim ersten Laden und dem Prefetching für Folgeseiten, erhält man nahezu sofortige Ladezeiten. Außerdem gibt es ein ganzes Ökosystem an Plugins und sofort nutzbaren Themes.

Gatsby ist in gewisser Weise meinungsstark, was die Datenanbindung angeht. Obwohl verschiedene Datenquellen wie Headless CMS, SaaS-Services, APIs oder sogar Markdown-Dateien unterstützt werden, musst du dennoch GraphQL verwenden, um diese Daten in deine React-App zu integrieren. Eine ausführlichere Feature-Liste findest du in der Gatsby.js-Dokumentation. Mehr Einblicke bietet auch ein spannender Gatsby.js Use Case unseres React-Entwicklers Mateusz Wójcik.

Was ist Next.js?

Im Gegensatz zu Gatsby ist Performance (obwohl sie ebenfalls sehr gut ist) nicht der Hauptfokus von Next.js. Das Ziel ist es, ein meinungsstarkes Toolset bereitzustellen, mit dem Developer serverseitig gerenderte Anwendungen oder Websites nahezu ohne Konfiguration erstellen können. Alle Funktionen sind in ihrer Dokumentation ausführlich beschrieben.

Next.js liefert dir von Haus aus Routing, CSS-in-JS, Ordnerstruktur, Code-Splitting und Data Fetching. Das Beste daran: Du kannst jedes dieser Elemente ganz einfach anpassen oder sogar vollständig ersetzen. Eine Vielzahl von Beispielen dafür, wie sich Next.js mit anderen Tools integrieren lässt, findest du hier.

Wer nutzt Gatsby und Next?

Fragst du dich, welche großen Unternehmen diese Frameworks einsetzen? Gute Frage – die Antwort lautet: sehr viele! Hier ein paar Beispiele:

Next.js

Mobile Version von Twitch,

Netflix Jobs Website,

Hulu,

IGN,

TikTok,

InVision.

Gatsby.js

Airbnb Engineering,

Impossible Foods,

Braun Canada,

Figma,

SendGrid,

Nike.

Gatsby und Next: die Gemeinsamkeiten

Bevor wir über die Unterschiede sprechen, sehen wir uns an, was beide Frameworks gemeinsam haben. Egal, welches du wählst: Du bekommst eine performante Website oder Anwendung – auch wenn dieses Ergebnis auf unterschiedlichen Wegen erreicht wird. Außerdem bieten Next.js und Gatsby.js eine gute SEO-Basis, da beide bereits gerendertes HTML ausliefern (zumindest beim initialen Rendern).

Wie oben erwähnt, kannst du von beiden Toolsets eine hervorragende Developer Experience erwarten. Zudem unterstützen beide Hot Reloading von Haus aus. Je nach Bedarf kann das ein großer Vorteil gegenüber Create React App sein, wo du den Großteil der Konfiguration und Architektur selbst übernehmen musst. Da beide Frameworks nicht besonders komplex sind, ist die Lernkurve recht flach – und obendrein gibt es ausgezeichnete Dokumentation und Tutorials.

Weitere nützliche Features, die Gatsby.js und Next.js ähnlich abdecken, sind: 

Caching,

Code-Splitting,

Prefetching,

Routing.

Gatsby und Next: die Unterschiede

Wenn beide Frameworks so ähnlich sind – worin unterscheiden sie sich? Es gibt einige Punkte, die wichtigsten betreffen das Rendern der Seiten und den Umgang mit Daten.

Page Rendering

Wie erwähnt rendert Next.js Seiten mittels Server-Side Rendering. Dafür benötigen wir einen Node.js-Server, der bei jeder Anfrage das HTML dynamisch rendert. Das geschieht zur Laufzeit. Nachdem das initiale HTML geladen wurde, übernimmt Next.js die Hydration, damit die Anwendung interaktiv wird. 

Gatsby.js hingegen generiert HTML während der Build-Phase, weshalb es oft als Static Site Generator gilt. Ganz korrekt ist das nicht, da es sich als PWA einsetzen und API-Calls problemlos handhaben lässt. Der Hauptvorteil dieses Ansatzes ist, dass kein Node-Server für das Rendering nötig ist. 

Nach dem Build liegen bereits HTML/CSS/JS-Dateien vor, die wir überall hosten können. So gut das klingt, dieser Ansatz hat auch Nachteile – vor allem, wenn die Website viele Unterseiten hat. Nach jeder Datenänderung sollte ein neuer Build angestoßen werden, der alle HTML-Dateien neu generiert. Bei Hunderten von Seiten kann das durchaus eine Weile dauern.

Data Handling

Beide Frameworks gehen dieses Thema sehr unterschiedlich an. Gatsby.js schreibt vor, dass du Daten via GraphQL abholst, während Next.js diese Entscheidung komplett dir überlässt. Aufgrund des Gatsby-Ansatzes konzentrieren wir uns hier auf dessen Erklärung, denn das ist die Methode, die du verwenden wirst. 

GraphQL ermöglicht es dir, pro Seite genau die Daten abzurufen, die du benötigst. Auf der anderen Seite bindet es dich an eine Technologie, die du vielleicht nicht einsetzen möchtest. Gatsby.js bietet zudem eine Vielzahl an Plugins, mit denen du unterschiedlichste Datenquellen anbinden kannst. Während des Builds werden die Daten abgerufen und für die spätere Nutzung in JSON-Dateien gespeichert – und bei Bedarf aktualisiert. Ausführlichere Docs zu diesem Prozess findest du auf der Gatsby.js-Seite.

Gatsby oder Next: Was soll ich verwenden?

Für kleine bis mittelgroße Projekte liegst du mit beiden richtig. Berücksichtige die Unterschiede – insbesondere beim Data-Fetching-Ansatz – und entscheide, was dir besser liegt. Wir empfehlen Gatsby, wenn du eine Website auf Basis des JAMstacks, einen persönlichen Blog oder einfach eine statische Website baust. Wenn du kein GraphQL verwenden möchtest und eine dynamischere Website oder eine hybride App (wie Twitter oder Reddit) planst, ist Next.js möglicherweise die bessere Wahl – vor allem wegen des SSR zur Laufzeit.

Komplizierter wird es bei großen Websites mit Hunderten oder Tausenden Unterseiten und Inhalten, die von mehreren Nutzerinnen und Nutzern hinzugefügt werden. In diesem Fall ist Next.js aufgrund seines SSR-Ansatzes klar im Vorteil. Wie erwähnt, generiert Gatsby.js bei jedem Rebuild jede Seite neu. Bei einer großen Menge an Content kann das sogar bis zu 20 Minuten dauern. Da Nutzer ihren neuen Content in Echtzeit sehen möchten und nicht Minuten oder in Extremfällen sogar Stunden warten wollen, ist statische Seitengenerierung hier nicht das passende Werkzeug.

Wie du siehst, ist die Antwort auf unsere Ausgangsfrage nicht ganz so einfach – es sei denn, du baust eine große Anwendung oder Website mit über 500 Seiten. Wie immer gilt: Wähle das passende Tool für die Aufgabe – basierend auf seinen Features und deinen persönlichen Präferenzen. Wir hoffen, dieser Guide hilft dir bei der Entscheidung und verschafft dir einen guten Überblick über die Vor- und Nachteile beider Frameworks, damit du am Ende mit deiner Wahl zufrieden bist. Möchtest du mehr erfahren? Melde dich unter hello@start-up.house