Gatsby JS: React-basierter Static Website Generator

Neben Tipps zum Online-Marketing stelle ich in diesem Blog auch immer mal wieder Trends in der Webentwicklung vor. Dazu gehören Static Website Generator und das React-basierte Framework Gatsby JS.

Was ist Gatsby JS?

Gatsby ist ein Static Website Generator. Mit diesem Tool lassen sich Webseiten bei Änderungen vollständig generieren und auf einem Server oder CDN hochladen. Das hat einige Vor- und Nachteile im Vergleich zu „klassischen“ Content-Management-Systemen (CMS) wie WordPress.

Im Gegensatz zu dem Go-basierten Tool Hugo setzt Gatsby auf Node.js und die ganze Vielfalt, die sich einem Entwickler durch NPM bietet. Zudem basiert Gatsby auf React, der oft eingesetzten und bekannten Javascript Library.

Vorteile

• Im Ecosystem von Node.js, NPM und React fühlen sich viele Frontentendwickler schon Zuhause, was die Entwicklung vereinfacht
• Eine Codebasis und Sprache für Server und Client (Wiederverwendung von Komponenten für statische und dynamische Inhalte)
• Viele Pagesspeed-Optimierungen built-in oder über Plugin verfügbar (z.B. Lazy Loading, Progressive Web App)
• Content-Management-Systeme (CMS) wie Wordpress oder Contentful lassen sich als Datenquelle nutzen (neben Markdown-Dateien und vieles mehr)
• Gute Community mit einer ständigen Weiterentwicklung

Nachteile

• Deutlich langsamer in der Generierung einer statischen Webseite als beispielsweise Hugo (das spürt aber nicht der Nutzer, und ist eher ein kleiner Nachteil für den Entwickler)
• Wenn man React nicht kennt oder mag, eher ungeeignet
• Komplexe Webseiten sind möglich, deren Umsetzung ist aber meist mit einem höheren Entwicklungsaufwand als beispielsweise mit WordPress verbunden (dafür aber auch mit einer besseren Performance)

Wie erstellt man eine Webseite mit Gatsby?

Da das englischsprachige Tutorial wirklich sehr gelungen ist, verweise ich darauf:

Gatsby.js Tutorial

Es ist einer der wenigen Tutorials, die wirklich so gut wie keine Vorkenntnisse mit den verwendeten Technologien voraussetzen. Klar, als Nicht-Frontendentwickler wird es schwierig, aber mit einem grundlegenden Verständnis von HTML, CSS und Javascript kann man mit Hilfe dieses Tutorials Schritt für Schritt erlernen, wie man eine einfache Webseite mit Gatsby JS erstellt.

Eine einfache Seite in Gatsby kann so aussehen:

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

const SecondPage = () => (
  <Layout>
    <SEO title="Page two" />
    <h1>Hi from the second page</h1>
    <p>Welcome to page 2</p>
    <Link to="/">Go back to the homepage</Link>
  </Layout>
)

export default SecondPage

Wer schon mal mit React gearbeitet hat, der wird von dem Code nicht überrascht sein.

Ein wenig komplexer wird es, wenn man den Content vom Code trennt. Dann können verschiedene Datenquellen den Inhalt bereitstellen, der dann durch Templates gerendert wird. Im Gegensatz zu den meisten Static Website Generators unterstützt Gatsby JS nicht nur Markdown-Dateien, sondern ganz viele Datenanbindungen.

Als Sprache zur Abfrage der Daten wird GraphQL verwendet, ebenfalls eine Technologie, die u.a. im React-Ecosystem zum Einsatz kommt.

So sieht dann ein Template aus, welches einen Seite darstellt, deren Inhalt sich aus einer Markdown-Datei mit YAML-Frontmatter generiert, inklusive dem GraphQL-Code:

import React from 'react'
import { graphql } from 'gatsby'

import Layout from '../components/layout'
import SEO from '../components/seo'

import {
  Container,
  Title,
  Content,
} from '../components/styled'

export default ({data}) => {
  //console.log(data)
  const post = data.markdownRemark
  return (
  <Layout>
    <SEO
      title={post.frontmatter.title}
    />
    <Container>
      <Container.Inner narrow>
        <Title as="h1">{post.frontmatter.title}</Title>
        <Content dangerouslySetInnerHTML={{ __html: post.html }} />
      </Container.Inner>
    </Container>
  </Layout>  
)}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`

---
date: "2016-09-23T16:47:06+02:00"
noindex: true
title: Impressum
---

**Angaben gemäß § 5 TMG:**
...

Fazit zu Gatsby JS

Gatsby JS überzeugt durch sehr gute Performance. Bei internen Links ist der Übergang von Seite zu Seite wirklich so schnell wie in einer Javascript oder nativen App. Trotzdem ist der Code absolut SEO-tauglich.

Zudem gefällt, das man nicht wieder eine neue Sprache erlernen muss, sofern man sich schon gut mit Javascript (ES6) und React auskennt.

Da man auch beispielsweise WordPress als Backend und Datenquelle nutzen kann, müssen sich Contentersteller noch nicht mal umgewöhnen. Allerdings ist der Workflow schon ein anderer. Eine wirkliche 1:1 Vorschau ist schwierig und die Neugenerierung der Webseite dauert jedes Mal eine Weile. Allerdings ist das etwas, was selten in der Praxis stört, sobald man sich daran gewöhnt hat.

Für ambitionierte, rasend schnelle Webseiten, Landingpages oder Microsites ist Gatsby JS sicherlich eine Empfehlung, sofern sich (noch) die Menge an Inhalten in Grenzen hält.

Im Showcase finden sich Beispiele für Webseiten, die mit Gatsby JS erstellt wurden. Darunter auch irgendwo diese Seite hier. 😉