Hydrogen ist ein Front-End-Webentwicklungs-Framework zum Erstellen einzigartiger Shopify-Shops. Es enthält alles, was Sie für den Einstieg benötigen, einschließlich Struktur, Komponenten und Werkzeugen, sodass Sie sich auf das Design und die Entwicklung von Funktionen konzentrieren können, die Ihr Unternehmen hervorheben.
Vorteile
Die von Shopify empfohlene und eigenwillige Methode zur Schaffung kreativer und dynamischer Handelserlebnisse ist als Hydrogen bekannt. Wasserstoff bietet die folgenden Vorteile, wenn Sie über die Einrichtung eines individuellen Schaufensters nachdenken.
Loslegen Sie sofort.
Hydrogen bietet eine Einstiegsvorlage zum Erstellen von benutzerdefinierten Shopify-Shops, die einfach zu verwenden ist. Das Starter-Design lässt sich nahtlos mit Shopify-Shops verbinden und bietet sofort einen vollständigen Kaufpfad.
Die Starter-Vorlage basiert auf dem Hydrogen-Framework und wurde mit dem CSS-Dienstprogrammpaket Tailwind gestaltet. Sie können entweder die Bibliothek von Tailwind verwenden oder Ihren eigenen Stil erstellen.
Hydrogen ist eine webbasierte integrierte Entwicklungsumgebung (IDE).
Effizienz steigern
Für optimale Geschwindigkeit ermöglicht die Architektur von Hydrogen eine Mischung aus statischem und dynamischem Datenabruf sowohl auf der Client- als auch auf der Serverseite. Es wurde auf der Grundlage modernster Webtechnologie entwickelt und nutzt einen hochmodernen Ansatz für die Webentwicklung um die folgenden Funktionen bereitzustellen:
Für Geschwindigkeit und Leistung
Es gibt integrierte Caching-Steuerelemente, um dynamische Informationen zu verarbeiten und API-Aufrufe zu minimieren.
Um den anfänglichen Aufwand zu reduzieren, wird serverseitiges Rendering verwendet.
React Server Components ist ein Datenabruf- und Rendering-Flow für React-Projekte, der eine eigene Meinung hat. Die Entwicklungserfahrung mit React Server Components ist viel besser. Komponenten werden schnell gerendert, sodass Sie Ihre Arbeit sehen können, während Sie sie erstellen.
Startervorlage für Wasserstoff
Erstellen Sie innovative Handelserlebnisse in kürzerer Zeit.
Hydrogen nutzt die grundlegenden Tech-Stack- und Commerce-Fähigkeiten von Shopify, um den Entwicklungsprozess zu beschleunigen. Für einen schnellen Datenabruf stellt es eine direkte Verbindung zur Shopify Storefront API her.
Hydrogen wird mit Shopify-spezifischen React-Komponenten, Hooks und Handelstools geliefert. Sie sind leicht zugänglich, schnell und einsatzbereit. Sie tragen auch dazu bei, die anfängliche Komplexität und den Standardaufwand für die Erstellung einer benutzerdefinierten Storefront zu reduzieren.
Für die Erstellung der Produktdetailseite wurde Wasserstoff verwendet.
Welche Funktion hat Wasserstoff?
Die Methode, mit der Sie eine maßgeschneiderte Schaufenstergestaltung erstellen, heißt Wasserstoff. Es wird mit einem Vite-Plugin geliefert, das serverseitiges Rendering (SSR) und Hydratations-Middleware sowie Codetransformationen für Server- und Client-Komponenten bereitstellt. Die SSR- und Hydratations-Middleware ist mit den derzeit verwendeten Vite SSR-Versionen vergleichbar.
Hydrogen enthält React Router, ein Framework, mit dem Sie dynamisches Routing verwenden können, um Routen in Ihrem Projekt zu verwalten.
Komponenten, Verbindungen und Hilfsmittel für Wasserstoff
Hydrogen umfasst Handelskomponenten, Hooks und Dienstprogramme, die Shopify-Funktionen und -Konzepte ermöglichen. Es stellt Standardcode für benutzerdefinierte Shops bereit, sodass Sie sich auf die Gestaltung einzigartiger Erlebnisse konzentrieren können.
Informationsquellen
Hydrogen ist für die Arbeit mit Daten aus der Storefront-API von Shopify konzipiert. Die an Komponenten, Hooks und Dienstprogramme übergebenen Daten haben eine Form, die mit den GraphQL-Typen der Storefront-API übereinstimmt und diese einhält.
Daten aus Drittquellen können auch von Hydrogen unterstützt werden. Daten aus Drittquellen hingegen müssen zunächst in die von den Wasserstoffkomponenten, Hooks und Versorgungsunternehmen geforderten Typen übersetzt werden, bevor sie an diese weitergegeben werden.
Zu berücksichtigende Einschränkungen und Faktoren
Nur Shopify-Webshops können mit Wasserstoff gebaut werden. Wasserstoff unterstützt derzeit nicht die Einrichtung anderer Formen maßgeschneiderter Geschäfte wie mobile Apps, Videospiele oder intelligente Gadgets.
