Was ist Gatsby JS und wie verwenden E-Commerce-Entwickler es, um blitzschnelle Geschäfte zu erstellen?

Scott Fitzgerald schrieb 1922 einen Brief an seinen Herausgeber, in dem er seine Absicht ankündigte, mit dem Schreiben eines neuen Romans zu beginnen, den er wie folgt beschrieb: 

„Etwas Neues – etwas Außergewöhnliches und Schönes und Einfaches und kompliziert Gemustertes.“

Drei Jahre später veröffentlichte er „The Great Gatsby“.

Es ist diese schöne Einfachheit, im Gegensatz zu der verschwenderischen Extravaganz der Figur Jay Gatsby, die das Open-Source-Framework GatsbyJS in Erinnerung ruft. Gatsby wurde im Mai 2015 von Kyle Mathews entwickelt und ist im Grunde genommen eine einfache Möglichkeit, eine Website mit React zu erstellen.

Fitzgerald starb, bevor „The Great Gatsby“ große Anerkennung fand, aber Mathews hatte mehr Glück. Etwas mehr als ein halbes Jahr nach dem Start, als Mathews im Januar 2016 auf der React-Konferenz sprach, wurde es bereits verwendet.

„Ich hatte angenommen, dass die Leute nur statische Websites für Markdown- oder JSON-gesteuerte Websites verwenden, aber wie sich herausstellte, gab es eine große Gruppe von Entwicklern, die daran interessiert waren, die Grenzen dessen zu erweitern, was statische Websites leisten können“, sagte Mathews.

Die Popularität wuchs so stark, dass Mathews und mehrere Hauptmitarbeiter 2018 Gatsby Inc. gründeten, um Entwicklungsteams beim Aufbau von „CMS-gestützten Websites mit modernen Tools“ zu unterstützen.

Heute gibt es mehr als 107.000 Live-Websites im Internet, die Gatsby JS verwenden.

Was ist Gatsby?

Gatsby ist ein Open-Source-Generator für statische Websites (SSG), der auf dem Frontend-Entwicklungsframework React basiert und die Webpack- und GraphQL-Technologie nutzt. Es kann verwendet werden, um statische Websites zu erstellen, die progressive Webanwendungen sind, den neuesten Webstandards entsprechen und auf Geschwindigkeit und Sicherheit optimiert sind.

In einem Artikel im BigCommerce-Entwicklerblog von Karen White stellt sie fest, dass SSGs nur für inhaltsorientierte Websites verwendet werden können, nicht für Websites mit dynamischen Elementen. Aber sie sagt, mit React daneben kann Gatsby App-ähnliche Websites sogar für E-Commerce erstellen.

„All das bedeutet, dass Gatsby die Geschwindigkeit einer statisch generierten Website sowie die Funktionalität eines Frameworks bietet“, schreibt sie.

ERFAHREN SIE MEHR ÜBER GATSBY + BIGCOMMERCE

Weitere Informationen darüber, wie Gatsby und BigCommerce zusammenarbeiten, finden Sie in unserem Entwickler-Blog.

Jetzt lesen

1. Statischer Site-Generator.

In gewisser Weise sind „statische Site-Generatoren“ genau das, wonach sie klingen. Aber was bedeutet das wirklich? Ob eine Site statisch oder dynamisch ist, hängt davon ab, ob die Seite als statische Seite manuell codiert und dann von einem Benutzer aufgerufen wird, oder ob die Seite bei Bedarf dynamisch über ein Content-Management-System generiert wird, wenn Benutzer darauf zugreifen. Letzteres erfordert serverseitige Verarbeitung.

Ein statischer Website-Generator bietet einen Kompromiss zwischen den beiden, indem er es Entwicklern im Wesentlichen ermöglicht, „dynamisch zu schreiben und statisch zu veröffentlichen“. Mit SSGs erstellen Entwickler eine statische Site, die auf einem HTTP-Server bereitgestellt wird. Es gibt nur Dateien und Ordner – keine Datenbanken, kein serverseitiges Rendern. Wenn ein Benutzer eine Seite anfordert, gibt der Server die passende Datei zurück.

SSGs haben auch Vorteile für die Cybersicherheit. Cyber-Angreifer verwenden Methoden wie Scripting, SQL-Datenbank-Injektionen oder serverseitige Datenbank-Schwachstellen – aber SSGs umgehen das, weil sie nur aus statischen Dateien bestehen und nicht auf Datenbanken verweisen.

2. Reagieren.

React ist laut Reactjs.org eine effiziente, flexible JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Dieses komponentenbasierte Framework bietet Entwicklern eine Reihe leichtgewichtiger, breit anwendbarer Kernfunktionen, die sie zum Erstellen von Single-Page- oder Mobilanwendungen verwenden können.

Einer der Vorteile der Verwendung von React-Komponenten besteht darin, dass ein modularer Aufbau hilft, alles konsistent zu halten, wenn Sie komplizierte Benutzeroberflächen haben.

3. GraphQL.

GraphQL ist eine Abfragesprache für APIs und Runtime, um diese Abfragen mit Ihren vorhandenen Daten zu erfüllen. Dies ist aus mehreren Gründen bei Entwicklern beliebt geworden. Erstens können Ihre Datenanforderungen deklarativ strukturiert werden, was bedeutet, dass Sie die API nach den genauen Feldern abfragen können, die Sie möchten, ohne sich mit einer Antwort auseinandersetzen zu müssen, die zusätzliche Eigenschaften enthält.

Dann können GraphQL-Abfragen mehrere Ressourcen in einer Anfrage umfassen. „Eine GraphQL-API hat im Wesentlichen einen einzigen Endpunkt, der alle verfügbaren Daten abfragen kann“, sagte White.

Es definiert das API-Design und die Client-Server-Interaktion neu, um die Entwicklererfahrung zu verbessern und nahtlose Benutzererfahrungen zu ermöglichen, sogar plattformübergreifend und auf Mobilgeräten.

4. Webpaket.

Webpack ist ein Open-Source-Modul-Bundler für JavaScript. Es „legt alle Ihre Assets – einschließlich JavaScript, Bilder, Schriftarten und CSS – in ein Abhängigkeitsdiagramm.“ Die Verwendung von Webpack bietet mehrere Vorteile, darunter ein einfacheres Styling, Code-Splitting, mehr Kontrolle bei der Verarbeitung von Assets, stabile Bereitstellungen in der Produktion und eine schnellere Seitenladegeschwindigkeit.

Das Gatsby-Ökosystem:Plugins und Starter

Plugins ermöglichen es Ihnen, Gatsby mit Plattformen von Drittanbietern zu verbinden und Daten zu importieren, die über eine GraphQL-Schicht verfügbar gemacht werden.

Einer der Gründe, warum Entwickler Gatsby lieben, ist, dass es auf React aufbaut. Das bedeutet, dass Sie alle Pakete verwenden können, die Sie bereits mit NPM (einem Paketmanager für Node.js-Pakete) verwenden.

Gatsby wird mit einigen Standardstartern geliefert und reduziert die Notwendigkeit von Boilerplate-Code. Da Gatsby Open Source ist, haben Sie jedoch auch Zugriff auf eine große und wachsende Anzahl von Plugins, Startern und Transformatoren, die von der bestehenden Gatsby-Community erstellt wurden. Allein ein Blick auf Gatsbys Seite auf GitHub zeigt mehr als 3.500 Mitwirkende.

Darüber hinaus hat BigCommerce eine Gatsby-Netlify-CMS-Vorlage veröffentlicht, um die Entwicklung einer serverlosen PWA-Storefront voranzutreiben.

4 bemerkenswerte Gatsby-Funktionen

Wenn es eine Sache gibt, auf die sich alle einigen können, dann dass Gatsby-Websites sehr schnell sein können. Aber es gibt auch viele andere Vorteile – besonders wenn Sie ein Entwickler sind, der bereits mit React vertraut ist. Hier sind einige der bemerkenswertesten Funktionen von Gatsby.

1. Auf Leistung ausgelegt.

Laut Leistungstests, die vom Gatsby-Gründer Kyle Matthews durchgeführt wurden, sind Gatsby-Websites im Durchschnitt zwei- bis dreimal schneller als ähnliche Arten von Websites, und das Framework selbst ist für die Leistung verantwortlich, sodass Sie es als Entwickler nicht in Anspruch nehmen müssen.

„Alles, was Sie tun müssen, ist, den Quellcode zu erstellen, und Gatsby.js kompiliert dann die leistungsfähigste Webpack-Konfiguration, um Ihre Website zu erstellen“, sagte Sarah Mischinger von Storyblok.

Statische Site-Generatoren wie Gatsby erhöhen die Geschwindigkeit und Leistung, da der Server lediglich eine Datei zurückgeben muss, anstatt Datenbankabfragen durchzuführen und jede Seite so zu erstellen, wie sie angefordert wird. Gatsby übernimmt den gesamten Datenabruf und verwendet diese Daten, um statische HTML-Dateien, JavaScript- und CSS-Dateien zu generieren, wodurch es schneller funktioniert.

In einem Artikel auf Medium schreibt Nicholas Feitel, dass seine Gatsby-Seite „mehr als doppelt so schnell geladen wurde wie meine einfache React-App und FÜNFmal so schnell wie eine komplexe Seite wie LinkedIn“. Mit Gatsby müssen Sie sich für die dynamische Seitengenerierung nicht auf Server verlassen – rendern Sie sie stattdessen im Build vor und verwenden Sie CDNs für die Bereitstellung.

2. Open-Source-Ökosystem.

Gatsby verfügt über ein umfangreiches Plugin-Ökosystem, leistungsstarke Integrationen und eine hervorragende Dokumentation. Seine umfangreiche Open-Source-Community ist eine der größten Stärken des Meta-Frameworks. Die Gatsby-Community hat bereits über 2.000 Plug-ins erstellt, daher ist es sehr wahrscheinlich, dass Sie ein bereits erstelltes Tool finden, das Ihren Anforderungen entspricht.

3. Kann problemlos Daten übertragen.

Mit Gatsby können Sie Daten aus fast jeder Datenquelle laden, sodass Sie alle Tools verwenden können, die Ihnen am besten zum Verwalten von Inhalten gefallen, während Sie weiterhin React und GraphQL auf der Entwicklungsseite verwenden. Quell-Plug-ins ermöglichen Ihnen die Integration mit SaaS-Lösungen und anderen Tools von Drittanbietern ohne umfangreiche Konfiguration, und Gatsby bietet auch API-Unterstützung für das Hinzufügen benutzerdefinierter Daten.

Darin, so Karen White, liegt Gatsbys große Stärke:„Gatsby führt das Konzept eines „Content Mesh“ ein, um zu beschreiben, wie es Drittplattformen verknüpft.“

„Das Content Mesh ist eine Abkehr von monolithischen All-in-One-Plattformen hin zu einem Modell, bei dem jede Drittanbieterplattform eine spezialisierte Funktionalität zur Gesamtarchitektur beiträgt – damit jede Plattform das tun kann, was sie am besten kann, und das Content Mesh dazu bringen Sie alles auf kohärente Weise zusammen.“

4. Gatsby rendert Seiten und Routen mit minimalen Problemen.

Wenn Sie nur React verwenden, müssten Sie immer noch eine Route für Komponenten in Ihrem Seitenordner erstellen. In Gatsby wird die Seite jedoch automatisch generiert, indem eine Komponente in einem Seitenordner vorhanden ist – ohne Router oder Switch.

Schwierigkeiten mit dem Gatsby-Framework

Wie die meisten Open-Source-Frameworks befindet sich Gatsby noch in der Entwicklung. Aber wie es jetzt aussieht, gibt es ein paar Nachteile bei der Arbeit damit, abhängig von Ihren Entwicklungsfähigkeiten und der Zeit, die Sie bereit sind, für die Erstellung zu investieren.

1. Scharfe Lernkurve.

Wenn Sie bereit sind, Zeit und Mühe zu investieren, verfügt Gatsby über eine Menge robuster Dokumentation und eine engagierte Benutzergemeinschaft. Und wie Matthew Bunday von Zen of React anmerkt:„Wenn Sie zu viel Aufwand in den Aufbau Ihres Online-Shops mit neuer Technologie stecken, könnte dies von Ihrem Kerngeschäft ablenken.“

2. Plugins und Starter sind nicht immer von höchster Qualität.

Bei der Open-Source-Entwicklung müssen Sie genau auf die Qualität dessen achten, was Sie erhalten, und welche Standards die Entwickler befolgen. Kalin Chernev schreibt:„Wenn GatsbyJS ernst genommen werden soll, sollten die Beispiele und Ausgangspunkte in der Community bessere Standards haben.“

3 bekannte Gatsby-Anwendungsfälle

Anwendungsfälle für Gatsby werden ständig erweitert, aber hier sind die drei wichtigsten aktuellen Anwendungsfälle – einschließlich eines handelsspezifischen Anwendungsfalls im Headless Commerce.

1. Erstellen Sie eine statische Website mit einem Headless-CMS.

Wenn Sie nur eine statische Webseite benötigen, die HTML, JavaScript und CSS unterstützt, ist Gatsby eine ausgezeichnete Wahl. Sie können es verwenden, um Seiten dynamisch aus fast jeder Quelle zu erstellen. Wenn Sie Inhalte in Ihrem CMS aktualisieren, können Sie einen automatisierten Auslöser konfigurieren, um die Inhalte auf der statischen Website zu aktualisieren. Das bedeutet, dass die Website nur dann neu aufgebaut wird, wenn der Inhalt aktualisiert wird.

2. Erstellen Sie progressive Web-Apps (PWA).

Gatsby ist von Grund auf als PWA-Framework konzipiert. Es verfügt über robuste PWA-Funktionen und ist auf schnelle und hochgradig zugängliche Funktionen ausgelegt.

Gatsby bietet ein PWA-ähnliches Erlebnis, da es Ihre Website vorab rendert – es gibt keinen serverseitigen Code, keine Datenbank usw. Sobald es geladen ist, übernimmt React, um ein App-ähnliches Browsing-Erlebnis und eine hohe wahrgenommene Leistung zu bieten. Die mit Gatsby gelieferte Out-of-the-Box-Optimierung umfasst das Aufteilen von Code-Bundles, Lazy-Loading-Routen, das Vorabrufen wichtiger Assets und das Inlining kritischer CSS.

3. Erstellen Sie eine Headless-E-Commerce-Website.

Das Content-Mesh-Konzept von Gatsby passt gut zum Headless-Commerce-Ansatz, All-in-One-Lösungen durch Modularität und Flexibilität zu ersetzen. Headless Commerce entkoppelt das Frontend – oder Head – der E-Commerce-Site von der E-Commerce-Engine, die das Back-End antreibt.

Wie Karen White erklärt:„Eine Headless-E-Commerce-Site, die BigCommerce verwendet, würde BigCommerce verwenden, um Produkte, Bestellungen und die Warenkorberstellung zu verwalten, aber eine andere Technologie als Stencil, um die Präsentationsebene zu rendern. Die alternative Präsentationsebene könnte ein benutzerdefiniertes React-Frontend, ein CMS wie WordPress oder Drupal – oder Gatsby sein.“

Bewertung, ob Gatsby für Sie sinnvoll ist

Ob Sie Gatsby verwenden sollten oder nicht, hängt stark von Ihrer Vision für Ihr Unternehmen und Ihren internen Entwicklungsfähigkeiten ab.

Wenn Sie ein Team haben, das mit den verwandten Technologien von Gatsby vertraut ist, und insbesondere wenn Sie bereits ein Content-Management-System haben, das Sie lieben, dann ist die Verwendung von Gatsby für Ihren E-Commerce-Shop eine großartige Option. Geschäfte, die sehr komplex sind oder häufig neue Produkte hinzufügen, sollten sich die Vor- und Nachteile genauer ansehen, bevor sie einsteigen.

1. Möchten Sie eine statische Website, wie eine einfache persönliche Website oder einen Blog?

„Statisch“ bedeutet nicht, dass der Inhalt nicht interaktiv ist oder sich nie ändert. Aber statische Websites sind eine gute Wahl für einfache Websites mit vielen Inhalten, die sich nicht oft ändern. Obwohl Sie technisch gesehen kein CMS benötigen, um diese Inhalte zu verwalten, wird dringend empfohlen, die Arbeit mit diesen Inhalten zu vereinfachen.

2. Ist Ihre Website komplex?

Sehr komplexe Websites mit vielen sich ändernden Daten und beweglichen Teilen können durch längere Build-Zeiten verlangsamt werden. Wenn Ihre Website von Daten abhängt, die erst abgerufen werden, wenn die Seite gerendert wird, verlieren Sie die Vorteile einer statisch generierten Seite.

3. Haben Sie bereits dynamisch generierte Routen?

Wenn Sie dynamisch generierte Routen auf Ihrer Website haben, können Sie die Vorteile statisch generierter Seiten nicht nutzen, wenn Sie sie zum Zeitpunkt der Erstellung nicht kennen.

Schlussfolgerung

Gatsby ist derzeit bei Entwicklern sehr beliebt, und das aus gutem Grund. Entwickler lieben React, auf dem Gatsby basiert, und es gibt viele Ressourcen rund um React und Gatsby. Es ist außerdem äußerst flexibel und erweiterbar – und in Kombination mit einem Headless-Content-Management-System kann es eine schnelle und leistungsstarke Methode zur Bereitstellung von Inhalten sein.

Gatsby und ähnliche Static-Site-Generatoren werden auch für E-Commerce-Shops immer beliebter – aber das ist ein etwas komplexerer Anwendungsfall. Wir empfehlen, sich vor dem Einstieg wirklich mit den Anforderungen und Möglichkeiten zu befassen. Für die richtige Art von Geschäft mit dem richtigen Team kann Gatsby jedoch wunderbar und schnell eine inhaltsreiche Schaufensterfront mit einem stabilen, sicheren E-Commerce-Backend präsentieren.