Headless Storefront für Shopify

Was bedeutet Headless?

Die Idee hinter „Headless“ ist es das Frontend, also der Teil der Webseite, den jeder sieht, vom Backend, dem technischen Unterbau, zu trennen. Diese Trennung macht alles viel flexibler. Mit einem Headless-System kannst du Änderungen am Design oder Inhalt vornehmen, ohne tief in den Code eintauchen zu müssen. Ebenso bist du nicht vollständig an die Funktionen des Backend gebunden und hast große Freiheit das Frontend zu gestalten. Das Frontend holt sich nur die Daten aus dem Backend und ist sonst technisch unabhängig.

Vorteile für die Kunden und Entwickler

Indem es eine größere Flexibilität und Unabhängigkeit zwischen dem Frontend und dem Backend gibt, können Webseiten und Anwendungen schneller und dynamischer gestaltet werden. Dies ermöglicht es den Entwicklern, innovative und benutzerfreundliche Erlebnisse zu schaffen.

Ein weiterer Vorteil für die Kunden ist die verbesserte Ladegeschwindigkeit der Seiten. Da das Frontend unabhängig vom Backend arbeitet, können Daten effizienter geladen und dargestellt werden. Dies führt zu kürzeren Wartezeiten für die Nutzer und kann die Gesamtzufriedenheit und das Engagement auf der Webseite oder in der Anwendung erheblich verbessern.

Außerdem ermöglicht die Flexibilität eines Headless-Systems eine einfachere und kostengünstigere Integration neuer Technologien und Dienste. Unternehmen können so schnell auf Marktveränderungen reagieren und neue Funktionen oder Inhalte einführen, ohne die gesamte Plattform überarbeiten zu müssen.

Shopify Storefront API

Die GraphQL Storefront API von Shopify ist eine Version der API, die ohne Zugangsberechtigung („authorization“) benutzt werden kann. Sie wird speziell für die Entwicklung von Headless Storefronts angeboten und bietet alle benötigten Schnittstellen.

Frontend Framework

Zum Entwicklen einer Headless Storefront bieten sich viele Frameworks an. Aus eigener Ehrfahrung kann ich Nextjs empfehlen. Nextjs kann sich voll an dem großem Ökosystem von React bedienen und bietet zusätzlich noch Funktionalitäten, wie umfangreiches Caching und einen Client Side Router, welches die Lade- und Navigationsgeschwindigkeit stark erhöht. Zusätzliche Features wie automatisches Code-Splitting, optimierte Bilder und dynamic Routes, erleichtern ebenso das Entwicklen von funktionsreichen und interaktiven Frontends.

Wie man mit Next.js und React ein Frontend entwickelt, ist ein umfassendes Thema, wofür es bereits zahlreiche Anleitugnen gibt, daher werde ich darauf nicht weiter eingehen.

Nextjs + GraphQL

Nextjs überschreibt die Node Fetch API mit verbessertem Caching, was das Nutzen von GraphQL Clients erschwert. Zum Beispiel der Apollo Client kann Probleme beim Caching bereiten, wenn man die Daten auf dem Server holt, da dieser und viele andere Clients für CSR (Client Side Rendering) entwicklet sind. Ich würde daher jedem Empfehlen einen eigenen GraphQL Client mit dem standard Fetch zu entwicklen. Auf diese Weise gibt es keine Komplikationen mit dem Caching von Nextjs und man hat auch mehr Kontrolle darüber.

Der Client könnte z.B. so aussehen:

import { DocumentNode, print } from "graphql";
import gql from "graphql-tag";

export default gql;

interface Headers {
  [key: string]: string;
}

interface Params {
  [key: string]: any;
}

export async function fetchGraphQL<T>(
  url: string,
  query: DocumentNode,
  headers?: Headers,
  params?: Params,
  cache: RequestCache | undefined = "no-store"
): Promise<T> {
  try {
    const queryString = print(query);

    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        ...headers,
      },
      body: JSON.stringify({
        query: queryString,
        variables: params,
      }),
      cache,
    });

    if (!response.ok) {
      // todo error
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    return (await response.json()) as T;
  } catch (error) {
    // todo error
    console.error("Error fetching GraphQL data:", error);
    throw error;
  }
}

Fazit

Das Konzept des Headless-Systems hat sich als revolutionär für die Entwicklung von Webseiten und Anwendungen erwiesen. Besonders im Ecommerce Bereich bietet es eine hohe Flexibilität und Effizienz. Dank dieser Architektur können leicht benutzfreundliche Storefronts geschaffen werden.