Was ist GatsbyJS?

Was ist GatsbyJS?

Gatsby ist ein modernes, React-basiertes Open-Source Framework zur Erstellung von hochperformanten Marketing-, Content- oder E-Commerce Websites, aber auch Web-Apps.

Gatsby ist als sogenannter „Static Site Generator“ bekannt und ist in Verbindung mit anderen Technologien sogar für die Erstellung von mobilen Apps geeignet.

Die erste Version von Gatsby wurde bereits im Jahr 2015 veröffentlicht. Seitdem hat sich das Ökosystem rund um Gatsby schnell entwickelt, sodass heute mehr als 2500 Plugins und zahlreiche passende CMS-Konnektoren zur Verfügung stehen.

Gatsby wird von der Gatsby Inc. entwickelt, die auch natives Cloud-Hosting für Gatsby Seiten mit zahlreichen Vorteilen anbieten.

Was sind Static Site Generatoren?

Static Site Generatoren wie Gatsby unterscheiden sich von anderen Web-Technologien, durch die Art und Weise, wie die Website und Ihr Content an die Besucher einer Website ausgespielt wird. Wenn Besucher auf die Website kommen, übernimmt nämlich kein herkömmlicher Server das Generieren der Inhalte (letzteres nennt man „Server Side Rendering“).

Stattdessen werden sämtliche Dateien inklusive Content vorab statisch generiert und beim Besuch eines Users werden nur diese statischen Inhalte übermittelt.

Dadurch muss beim Besuch keine Datenbankverbindungen aufgebaut werden und es werden auch keine Plugins u. ä. geladen. Das hat zum Ergebnis, dass statisch generierte Seiten in der Regel rasant laden und darüber hinaus nur schwer durch Hacker angreifbar sind.

Static Sites haben allerdings den Nachteil, dass sämtliche Inhalte neu generiert werden müssen, wenn sich Content und Daten im CMS (z. B. Texte, Bilder, Videos etc.) ändern. Dieses Neugenerieren wird Build-Prozess genannt und kann bei einer großen Website eine ganze Weile dauern.

Da dies als potenzielles Problem bekannt ist, bietet Gatsby schon Lösungen wie Incremental Site Generation (ISG) an, die den Build-Prozess massiv verkürzen, indem nicht die ganze Seite erneuert wird, sondern nur die Teile, die auch verändert wurden. Das hat natürlich einen sehr positiven Einfluss auf die Performance der Website.

Was macht GatsbyJS besonders und anders?

GatsbyJS ist ein auf React basierendes Framework mit einer großen Community und zahlreichen Erweiterungen für verschiedenste Anwendungsfälle – zum Beispiel Lazy Loading, um die Performance einer Website noch weiter optimieren zu können.

Daher ist Gatsby im Vergleich zu anderen Static Site Generatoren gerade dann eine gute Wahl, wenn die Webseiten-Entwickler sich mit React auskennen und damit arbeiten möchten.

Für Webseiten-Betreiber und Entwickler bietet zudem die große Gatsby-Community ein hohes Maß an Sicherheit, dass Gatsby nicht so rasch von der Bildfläche verschwinden wird.

Wie funktioniert Gatsby?

Vielfältige Datenquellen

Damit eine Website auch Inhalte anzeigt und dieser verwaltbar wird, braucht es natürlich eine Quelle für diesen Content.

Gatsby Applikationen können auf vielfältige Datenquellen zugreifen. Dazu kann Gatsby neben dem REST-API Standard insbesondere auch den GraphQL-API Standard verarbeiten. GraphQL APIs sind besonders skalierbar und effizient und damit besonders gut geeignet, um den Content für ein Gatsby Frontend zu liefern.

Als Datenquellen für Gatsby Frontends können sowohl CMS-Systeme, als auch einfache Dateien dienen. Beliebte (Headless) CMS, die in Kombination mit Gatsby verwendet werden, sind zum Beispiel:

• Contenful
• Hygraph (ehemals GraphCMS)
• Wordpress
• Drupal
• Sanity
• Strapi
• Netlify CMS
• Prismic

Weiterhin können Gatsby Applikationen auch aus Markdown-Dateien und entsprechend mit Dateikonvertierung sogar anderen Dateiformaten wie Word-Dateien generiert werden. Für kleine Anwendungen braucht man also nicht unbedingt ein CMS.

Beliebte und moderne Technologien

Frontends, die mit dem Gatsby Framework realisiert werden, setzen technisch gesehen auf React.js auf. React.js ist ein sehr beliebtes Javascript Framework, mit dem zahlreiche sehr skalierbare Applikationen umgesetzt wurden. So setzen etwa Unternehmen wie Facebook, Netflix, Uber, Airbnb und die New York Times auf React.js.

Ein großer Vorteil von React.js ist neben einer angenehmen Umgebung für Entwickler das große Ökosystem. Es gibt für React.js zahlreiche kostenfreie Bibliotheken, die auch in kommerziellen Projekten genutzt werden können. Etwa Bildergalerien, Slider, Drag-and-drop Elemente oder PDF-Generatoren.

Eingebaute Performance-Optimierung

Durch zahlreiche Plugins und interne Prozesse unterstützt GatsbyJS Entwickler dabei extrem Performance Webseiten und Apps zu entwickeln. Gatsby setzt dabei auf eine JAM-Stack Architektur. JAM steht für JavaScript, APIs & Markup. Neben dem Generieren von statischen Seiten optimiert Gatsby die Seiten automatisiert.

Zudem sorgt Gatsby dafür, dass Elemente, welche die Ladezeiten negativ beeinflussen, automatisiert verbessert werden.

All das führt dazu, dass Kunden oft von 3- bis 10-fach schnelleren Ladezeiten nach der Migration zu Gatsby sprechen.

Erstklassiges Hosting mit der Gatsby Cloud

Zwar sind Gatsby Websites mit vielen modernen Hosting-Anbietern wie AWS oder Netlify kompatibel, da sie weder einen herkömmlichen Backend-Server noch eine Datenbank benötigen. Die beste Erfahrung bietet aber das Hosting-Angebot der Gatsby Inc.: Gatsby Cloud.

Die Gatsby Cloud bietet ein sehr schnelles CDN, Preview-Funktionen, CI/CD Pipelines und weitere für Gatsby optimierte Komponenten. Für Gatsby Cloud sind sowohl kostenpflichtige als auch ein umfangreicher kostenfreier Plan verfügbar.

Einsatz Szenarien für Gatsby

Wann ergibt es Sinn, Gatsby im Web Development einzusetzen?

Der Einsatz von Gatsby ergibt primär dann Sinn, wenn Sie sich als Webseiten-Betreiber:

• von laufenden, technischen Webseiten-Updates (wie etwa für Plugins) unabhängig machen möchten
• schnelle Ladezeiten und eine exzellente Performance realisieren möchten
  eine möglichst große Absicherung gegen Hackerangriffe bieten wollen
• ihr technisches SEO optimieren wollen (Ladezeiten haben mittlerweile einen großen Einfluss auf das Suchmaschinenranking)
• Entwickler oder eine Agentur beauftragen können, die sich mit React oder idealerweise Gatsby auskennen

In welchen Fällen ist Gatsby vielleicht nicht die beste Wahl?

Gatsby (und allgemein Static Site Generatoren) sind oft nicht die beste Wahl, wenn eine Applikation mit sehr dynamischen Inhalten erstellt werden soll. Sie funktionieren hervorragend für eher statische Seiten, wie eine Firmenwebsite oder einen Blog. Aber wenn Sie beispielsweise eine sehr interaktive Web-App oder ein Dashboard umsetzen wollen, dann kann es sein, dass Gatsby vielleicht nicht die beste Wahl ist.

Wichtig: In den neueren Versionen bietet Gatsby mittlerweile auch serverseitiges Rendering an, sodass auch die Umsetzung dynamischer Websites nun besser möglich ist.

Headless CMS & Gatsby

Durch seine mächtige API kann Gatsby an außerordentlich viele CMS angeschlossen werden. Selbst der Betrieb die Blog-Software Wordpress ist möglich. Üblicher sind jedoch Headless Content-Management-Systeme (CMS) wie Hygraph, Contentful, Sanity oder Storyblok.

Je nach CMS sind hier auch vielfältige Integrationen möglich, wie etwa die Einbindung eines Vorschau-Modus oder eines Drag-and-Drop oder WYSIWG-Editors zum Erstellen neuer Seiten und Inhalte.

Für viele CMS bietet Gatsby zudem Plugins an, die eine Anbindung noch mehr vereinfachen. Eine Liste der für Gatsby verfügbaren CMS Plugins findet sich hier: Gatsby Plugin Library | Search 3,000+ Plugins

Fazit

Gatsby ist ein mächtiges, auf React basiertes Framework für moderne Websites und Apps. Das große Ökosystem mit seinen zahlreichen Plugins und der aktiven Community, die sehr stabile technische Infrastruktur und Gatsby Cloud als Hosting-Plattform sind ein rundes Paket für alle Unternehmen, die nach einer aktuellen und skalierbaren Plattform für ihr digitales Vorhaben suchen.

Benötigen Sie eine Gatsby Agentur?

Wir bei Especial kennen uns hervorragend mit Gatsby aus. Wir helfen unseren internationalen Kunden regelmäßig großartige Erfahrungen im Bereich Web & App umzusetzen.

Falls Sie Unterstützung oder eine kostenfreie Beratung bezüglich Gatsby benötigen, zögern Sie bitte nicht uns zu kontaktieren – entweder direkt über das Kontaktformular hier auf unserer Website, oder über hello@especial.digital.