Müssen wir Shopify verlassen, um Next.js zu nutzen?

Nein, und fast niemand sollte das. Shopify bleibt das Commerce-Backend, der Checkout und das Backend, das Ihr Team schon benutzt. Was sich ändert, ist, welches System den Storefront rendert, und das ist eine kleinere Entscheidung als die Plattform zu verlassen.

Sollten wir stattdessen Hydrogen nehmen?

Wenn der Storefront immer nur ein Storefront ist, ist Hydrogen eine vernünftige Voreinstellung mit weniger zu treffenden Entscheidungen. Next.js gewinnt dort, wo die Site mehr ist als der Shop: Inhalte, ein Design System, das mit einem anderen Produkt geteilt wird, Marketingseiten mit eigenen Rendering-Anforderungen, oder alles, was außerhalb von Shopify leben muss.

Was passiert mit unseren Apps?

Das ist der Teil, den man spät entdeckt. Apps, die Skript in ein Liquid-Theme schieben, hören auf zu funktionieren, wenn das Theme weg ist. Bewertungen, Upsells, Banner, ein Teil der Analytics: jedes muss neu gebaut, durch etwas API-basiertes ersetzt oder bewusst gestrichen werden. Machen Sie diese Liste vor dem Bau.

Es kann, und es passiert nicht automatisch. Ein gut gebautes Liquid-Theme auf Shopify-Infrastruktur ist schnell. Headless gewinnt, wenn das Theme ein Dutzend eingeschobener Skripte trägt oder wenn die Seite ein Rendering-Verhalten braucht, das Liquid nicht ausdrücken kann. Messen Sie zuerst die aktuellen Templates, denn manchmal sind drei Bilder das ganze Problem.

Shopify oder Next.js: Nicht die Wahl, nach der es aussieht

Das sind keine Alternativen. Shopify bleibt in fast jeder Variante das Commerce-Backend; die eigentliche Wahl ist ein Liquid-Theme oder ein Storefront, der Ihnen gehört.

Veröffentlicht am 22. September 20263 Min. Lesezeit

Die Fragestellung ist auf eine Art falsch, die Geld kostet, deshalb zuerst das.

Shopify und Next.js sind nicht zwei Arten, einen Shop zu betreiben. In fast jeder Variante dieser Entscheidung bleibt Shopify: Produkte, Bestellungen, Checkout, Zahlungs-Compliance und das Backend, das Ihr Team kennt. Zur Wahl steht etwas Engeres und Billigeres, als es klingt - wer den Storefront rendert.

Was ein eigener Storefront bringt

Drei Dinge, und sie verdienen präzise Namen, weil das Marketing darum herum vage ist.

Rendering, das Sie kontrollieren. Welche Seiten statisch sind, welche revalidieren, welche dynamisch sind und was gestreamt wird. Ein Liquid-Theme hat ein Rendering-Modell und Sie können es nicht ändern. Das hier ist das ganze Modell, und auf einer Produktseite ist es der Unterschied, ob der Bild-Request im HTML startet oder nach einem Skript.

Ein Frontend, das mehr sein kann als ein Shop. Inhalte, Dokumentation, ein Konfigurator, ein eingeloggter Bereich, ein Design System, das mit einem Produkt geteilt wird, das nicht der Storefront ist. Das sind die Projekte, bei denen ein Theme der falsche Behälter wird.

Eine Grenze gegen das App-Ökosystem. In einem Theme legt jede installierte App Skript auf Ihre Seite, und Sie tragen die Kosten dauerhaft. Headless macht daraus jedes Mal eine ausdrückliche Entscheidung statt einer Voreinstellung.

Was es Sie kostet

Den Theme-Editor. Dass Merchandiser Sektionen ohne Entwickler umsortieren, ist eine echte Fähigkeit und die, die im Pitch am häufigsten weggewischt wird. Ein Teil kommt über ein CMS zurück. Planen Sie das ein oder rechnen Sie mit Streit.

Die Apps. Alles, was per Skript-Injektion in Liquid funktionierte, hört auf. Bewertungen, Upsells, Banner, Teile Ihrer Analytics. Jedes ist jetzt eine Entscheidung: gegen eine API neu bauen, ersetzen oder absichtlich streichen. Machen Sie diese Liste vor dem Bau und nicht währenddessen.

Checkout, meistens. Der Checkout bleibt bei Shopify, was das richtige Ergebnis ist und klar gesagt gehört. Sie bauen den regulierten Teil nicht neu.

Hydrogen oder Next.js, die eigentliche Gabelung

Sobald Sie entschieden haben, den Storefront selbst zu besitzen, ist das die wirkliche Wahl.

Hydrogen ist Shopifys eigenes Framework, auf Remix gebaut, mit den Shopify-Annahmen bereits getroffen und Oxygen als Deployment-Ziel. Wenn der Storefront immer nur ein Storefront ist, ist das eine sinnvolle Voreinstellung mit weniger offenen Entscheidungen.

Next.js verdient seinen Platz, wenn die Site mehr ist als der Shop. Marketingseiten mit eigenen Rendering-Anforderungen. Inhalte, die nicht in Shopify gehören. Ein Design System, das mit einer Anwendung geteilt wird. Eine zweite Datenquelle. Ab da fangen Hydrogens Annahmen an zu kosten statt zu helfen.

Der Traffic-Test, vor all dem

Nehmen Sie die Templates, die Ihren Umsatz tragen. Meist die Startseite, eine Kategorie, eine Produktseite.

Messen Sie sie an Felddaten, nicht an einem Labordurchlauf. Die Ursachen sind konkret und es sind wenige, und bei einem Shopify-Theme lautet die Antwort sehr oft: ein Hero-Bild, das der Browser spät findet, eine Schrift, die das Zeichnen blockiert, und vier Apps. Alle drei sind in Liquid lösbar, in einer Woche, für einen Bruchteil eines Neubaus.

Wenn die Zahlen schlecht sind und die Ursache das Rendering-Modell der Plattform ist statt dessen, was daran geschraubt wurde, haben Sie einen echten Fall. Wenn die Ursache drei Bilder sind, bekommen Sie mit einem Neubau eine schnelle Site und werden nie erfahren, ob Sie eine gebraucht haben.

Wann ein Theme schlicht richtig ist

Ein Shop, der ein Shop ist. Ein Team ohne Frontend-Entwicklerin. Ein Merchandising-Ablauf, der am Theme-Editor hängt. Ein Katalog, der sich öfter ändert als der Code.

Wir bauen Headless-Storefronts und sagen das trotzdem: ein gut gepflegtes Liquid-Theme schlägt einen Headless-Storefront, um den sich niemand kümmert, und Letzteres bekommen Sie, wenn die Agentur geht und nichts übergeben wurde. Was ein Bau tatsächlich umfasst, ist die Frage, die man vor jeder Unterschrift stellen sollte, auch vor unserer.