Shopify Hydrogen und Oxygen – Alles was du darüber wissen musst

Shopify

29.9.2022

Letztes Jahr kündigte Shopify mit Hydrogen & Oxygen (den neuen Headless-Frameworks) seine Investition in den Headless-Commerce an. Fast ein Jahr später, mit der Einführung von Shopify Editions, ist Hydrogen & Oxygen offiziell in Betrieb gegangen. Mit ihnen kommen Verbesserungen und Aktualisierungen, die diese Frameworks für große Marken und ambitionierte E-Commerce-Manager attraktiver machen werden. Um dir die Recherche zu ersparen, haben wir alles zusammengetragen, was wir bisher wissen, was die neuen Funktionen sind und was das alles für den Headless Commerce bedeutet. Lass uns also loslegen...

Hydrogen

Hydrogen wurde auf der Shopify Unite 2021 angekündigt und ist Shopifys Antwort auf eine einfachere, schlankere, Headless Build für Entwickler und ein aufregendes Erlebnis für Kunden, die durch einen Shopify-Shop navigieren. Das neue Framework von Shopify nutzt ein React-basiertes Framework, das benutzerdefinierte Storefronts mit größeren Personalisierungsmöglichkeiten ermöglicht, die schnell erstellt werden können und die Leistung der Website nicht beeinträchtigen.

Wie hilft das den Händlern? In der Vergangenheit musste dein Entwickler meist einen Kompromiss zwischen einer schnellen Website und einem schönen Design eingehen. Mit Hydrogen werden verschiedene Technologien zusammengebracht, um sowohl eine außergewöhnliche Website-Performance als auch ein dynamisches Nutzererlebnis zu erreichen.

Die Vorteile von Hydrogen:

  1. Starter-Templates: Mit Hydrogen haben Entwicklungsteams Zugang zu einem Starter-Kit, das auch einen fertigen Demo-Store enthält und die Entwicklungszeiten beschleunigt.
  2. Vorgefertigte Komponenten: Hydrogen hat vorgefertigte Komponenten für Entwickler, die die Arbeit mit der API erleichtern. Das Framework ermöglicht es dir außerdem, Komponenten auf deiner gesamten Website wiederzuverwenden, da es standardmäßig mit einem Tailwinder ausgestattet ist.
  3. Serverseitiges Rendering: Ermöglicht das schrittweise Laden deiner Website je nach Priorität und Navigation des Nutzers, anstatt die gesamte Seite auf einmal zu laden, was die Geschwindigkeit der Website erheblich verbessert. Dies ist ein Vorteil von Headless Commerce und ist nicht auf Hydrogen beschränkt.
  4. Standard-Tail-Wind: Erlaubt es dir, Komponenten, die für einen bestimmten Zweck erstellt wurden, wie z. B. eine PDP, auf anderen Seiten deiner Website, wie z. B. deiner Blogseite, wiederzuverwenden, ohne CSS-Klassen zu aktualisieren.
  5. Vorbereitet für den SEO-Erfolg: Hydrogen enthält vorgefertigte SEO-Optimierungen wie eine automatisch generierte Sitemap, Metadaten für jede Seite und eine anpassbare robots.txt-Datei.

Die Nachteile von Hydrogen:

  1. Entwickelt für die Shopify-API: Hydrogen wurde nur für die Shopify-API entwickelt. Daher sind seine Komponenten stark an einzelne Teile der Shopify-API gebunden. Außerdem kann Hydrogen nur für die Erstellung von Shopify-Shops verwendet werden und unterstützt keine anderen benutzerdefinierten Storefronts wie z. B.mobile Apps.
  2. Auf Entwickler ausgerichteter Workflow: Das Hydrogen-Framework ist sehr codelastig, d.h. alles muss von deinem Entwicklungsteam oder deiner Shopify Agentur entwickelt und gepflegt werden. Dein nicht entwickelndes Team, z. B. die Marketingabteilung, wird nicht in der Lage sein, das Frontend deiner Website zu verwalten. Aber das kann bei jedem Headless Build der Fall sein. Alternativ kannst du mit einer Shopify Agentur wie uns zusammenarbeiten, die deinen Hydrogen Store langfristig aufbaut und verwaltet. Unser Team steht dir gerne zur Verfügung, um das im Detail zu besprechen.
  3. App-Integrationen: Obwohl Shopify einige seiner beliebtesten Apps für die einfache Integration in das Hydrogen-Framework bereithält und Sanity und Contentful als bevorzugte CMS-Wahl anbietet (dazu kommen wir später), musst du ein CMS oder eine App, die nicht kompatibel ist, selbst mit einer Zwischenlösung verknüpfen.

Oxygen

Kurz gesagt: Oxygen ist eine Shopify-Hosting-Plattform, mit der du Hydrogen-Stores direkt auf Shopify Plus hosten kannst. Normalerweise brauchst du bei Headless Lösungen eine Drittanbieter-Plattform, um Frameworks zu hosten, aber mit Oxygen ist das nicht mehr nötig. Stattdessen kannst du dich nahtlos in die Storefront-API von Shopify integrieren und mehrere verschiedene Hydrogen Storefronts zur Vorschau, zum Austausch, zum Testen und zum Experimentieren bereitstellen.

Wie gut ist es für Shopify-Händler geeignet? Oxygen wurde entwickelt, um große Mengen gleichzeitigen Traffics bei großen Verkäufen wie dem Black Friday zu bewältigen, ohne dass es zu Abstürzen kommt, und um weltweit eingesetzt werden zu können.

Was gibt es noch Neues?

Shopify hat Hydrogen im Juni 2022 offiziell auf den Markt gebracht, einschließlich einiger Updates. Hier findest du eine Übersicht der wichtigsten Funktionen, die Shopify zu seinen Frameworks Hydrogen und Oxygen hinzugefügt und verbessert hat:

Bevorzugte CMS-Partner

Im Rahmen der offiziellen Einführung von Hydrogen & Oxygen hat Shopify in das CMS-Tool Sanity investiert und sich mit diesem zusammengetan. Sanity ist ein vollständig anpassbares CMS-Tool, das sowohl von Entwicklern als auch von anderen Verantwortlichen für Inhalte von Grund auf neu entwickelt werden kann. Im Rahmen dieser Partnerschaft hat das Team von Sanity ein Tool für Content-Anwendungen entwickelt, das speziell auf Shopify Hydrogen & Oxygen zugeschnitten ist. Damit können Händler ihre Produkte, Varianten und Kollektionen auf Shopify behalten und ihr Frontend mit Sanity, ihrem CMS, synchronisieren.

Ein weiterer bevorzugter CMS-Partner ist Contentful. Contentful ist eine der am schnellsten wachsenden CMS-Technologien auf dem Markt. Daher ist es keine Überraschung, dass das Unternehmen als bevorzugter Anbieter für die erste Version von Hydrogen & Oxygen ausgewählt wurde. Ihr API-first-Ansatz bedeutet, dass Markeninhalte, egal ob Artikel oder Produktinformationen, überall dort verfügbar sind, wo du deine Produkte verkaufst, und dass sie in Echtzeit und präzise übersetzt und aktualisiert werden können. Mit Hydrogen & Oxygen und einem bevorzugten Partner wie Contentful entsteht ein leistungsstarkes System für jede Marke.

Es ist wichtig zu erwähnen, dass andere CMS Systeme immer noch in deinen Headless Stack integriert werden können. Allerdings ist dafür eine individuelle Integration erforderlich, die mehr Zeit in Anspruch nehmen kann, als wenn du Sanity oder Contentful verwendest.

Shopify API Updates

Bei all dem Hype um Hydrogen hat Shopify seine API aktualisiert, um das neue Framework zu unterstützen. Zuvor war die Storefront-API für serverseitige Anwendungen ungeeignet. Für Onlineshops bedeutet das, dass sie an ihre Grenzen stoßen konnten, was die Gesamtfunktionalität ihrer Website beeinträchtigte. Mit diesem Update kann der Server Anfragen stellen, die für viele Nutzer gelten, ohne an ein Limit zu stoßen, und so serverseitige Vorgänge ermöglichen, die bisher zu riskant waren.

Was dies für die Zukunft des E-Commerce bedeutet

Mit der Ankündigung von Hydrogen & Oxygen im letzten Jahr und jetzt, wo es offiziell an den Start geht, wird immer deutlicher, dass Headless die Zukunft des E-Commerce ist und Shopify den Weg ebnet. Shopify hat die Angewohnheit, Barrieren für seine Kunden zu beseitigen, und Hydrogen & Oxygen sind da nichts anderes - mit dieser Einführung hat Shopify Headless Commerce für ein breiteres Spektrum von Händlern geöffnet, nicht nur für diejenigen mit hohen Umsätzen und einem großen Kundenstamm. Für Marken bedeutet Headless (und Hydrogen als Headless-Framework) neue Möglichkeiten, schneller zu reagieren und sich an veränderte Anforderungen anzupassen, um ihre Conversion Rates zu erhöhen. Für die Kunden werden schnellere und reichhaltigere Erlebnisse in ihren Lieblings Online Shops zur Normalität.

Hydrogen ist auch für die technische Zukunft des Webs von großer Bedeutung, da die Verwendung von React Server Components die Roadmap von React vorantreibt. Dieser Wandel bedeutet, dass Entwickler und Digitalagenturen ihre bewährten Praktiken, die durch monolithische Architekturen eingeschränkt sind, nutzen können, um den Entwicklungsprozess zu beschleunigen, die Leistung zu verbessern und die Designfreiheit zu erhöhen sowie die Möglichkeit zu vereinfachen, das Online-Shopping-Erlebnis zu personalisieren.

Unabhängig davon, welches Headless-Framework du für das beste hältst, ist klar, dass eine große Plattform wie Shopify, die in diesen Weg zum Headless-System investiert und ihn für ihre Händler einführt, einen direkten Einfluss darauf haben wird, wie Marken ihre E-Commerce-Shops für die Zukunft aufbauen.