Was ist Gatsby JS

Gatsby JS ist ein auf React basierter Static Site Generator der den JAMstack Ansatz verfolgt.

Wie funktioniert Gatsby

Im Grunde braucht man kein CMS im Hintergrund, man kann auch einfache Markdown oder JSON Dateien schreiben, nur dafür muss man direkt Zugang zum Code haben und das ist
weder üblich noch Usiblity freundlich. In der Regel wird der Content in einem externen Headless System (CMS) gepflegt. In unserem Beispiel nehmen wir Strapi, in der unten aufgeführten Grafik würden wir unsere Datenquelle also von Strapi beziehen, denn Strapi und Gatsby ergänzen sich super wie ich im weiteren Beitrag noch erleutern werde.

Quelle: https://www.gatsbyjs.org/

Wie holt Gatsby sich die Daten vom Strapi

Strapi stellt die Daten über eine API bereit. Man muss lediglich folgendes gatsby-source-strapi Plugin installieren und einfach nur noch die URL und die Types angeben, fortan zieht sich Gatsby diese Daten und stellt sie per GraphQL bereit.

Gatsby und GraphQL

Jetzt kommt das Herzstück in Gatsby - der GraphQL Playground.
Dort sehen wir auf Anhieb alle Daten die uns Gatsby für unsere Seite bereitstellt und wir können uns hier flexibel unsere Queries selber zusammenstellen.

Wie man hier sieht, erkennt Gatsby die Strapi Types sofort und integriert die in den Playground. Jetzt können wir uns die Query mit den Attributen einfach so zusammenstellen wie wir sie brauchen, dann kopieren wir sie aus dem Playground und fügen den als StaticQuery auf der Seite ein, wo wir sie letztendlich haben wollen und haben kompletten Zugriff darauf.

Gatsby Build Prozess

Beim Build Prozess wird die Seite gebaut, und erst dann zieht er sich die Daten und erst dann generiert dieser aus diesen Daten den Content bzw. auch ganze Seiten.

Gatsby zieht die Daten immer nur während des Build Prozesses

Bedeutet: Wenn ich in Strapi neuen Content pflege, ist dieser auf der bestehenden Seite nicht vorhanden, möchte ich den neu erstellen Content in Gatsby integrieren muss ich den Build Prozess neu anstoßen, erst dann generiert er den Content neu, deshalb auch der Begriff Static Site Generator.

Automatischer Build & Automatisches Deployment

Natürlich ist es keine Option jedesmal händisch den Build Prozess neu anzustoßen, sobald der Content verändert wurde, dafür bieten Strapi und Netlify, den hier beschriebenen Server Provider, smarte Lösungen. Netlify supported sogenannte Build Hooks

Diesen müssen wir nur über Strapi ansteuern und das können wir ganz einfach über die Oberfläche machen. Eine Anleitung dazu hier: https://strapi.io/blog/webhooks

Und so wird nach jeder Content Änderung der Build Prozess angestoßen, die Seite komplett neu statisch generiert und anschließend deployed.

Die Kombination zwischen Gatsby, Strapi und Netlify ist Magisch - es ist aber auch kein Problem andere Hosting Provider wie Firebase zu nehmen.