Next.js Commerce

Commerce ist die Stelle, an der sich das Rendering-Modell von Next.js auszahlt - und an der ein Fehler am teuersten ist. Eine Produktseite, die drei Sekunden braucht, konvertiert nicht, und jedes Storefront-Template, das wir geerbt haben, traf dieselbe architektonische Entscheidung: ein use client ganz oben, weil der Warenkorb Zustand braucht.

Damit wird der Katalog - der Teil, der statisch, am Rand gecacht und indexiert sein sollte - so dynamisch wie der Checkout.

Wie wir das trennen

Der Katalog ist statisch. Produktseiten, Kollektionen und Such-Landingpages werden beim Build erzeugt oder per Tag revalidiert, wenn das Backend meldet, dass sich etwas geändert hat. Sie kommen vom CDN, sie sind indexierbar, und ihr LCP hängt nicht davon ab, dass Ihre Commerce-API wach ist.

Der Warenkorb ist eine Client-Insel. Eine kleine Komponente, keine Grenze um die Seite. Menge, Mini-Warenkorb und In-den-Korb sind interaktiv; Produktbeschreibung, Bilder, Bewertungen und strukturierte Daten drumherum sind es nicht und bleiben auf dem Server.

Preise und Bestand sind die bewusst behandelte Ausnahme. Sie dürfen nicht veralten und dürfen die Seite zugleich nicht dynamisch machen. Entweder streamen sie hinter Suspense nach, während der Rest der Seite malt, oder sie werden per Webhook des Backends tag-revalidiert. Was davon, hängt davon ab, wie oft Ihre Preise sich tatsächlich bewegen - wir fragen, statt anzunehmen.

Der Checkout bleibt, wo er ist. Sind Sie bei Shopify, ist der gehostete Checkout PCI-konform, konvertiert gut und ist einen Nachbau nicht wert. Wir integrieren bis dorthin. Ein eigener Checkout ist ein eigenes Projekt, und wir sagen Ihnen, wenn er nicht gerechtfertigt ist.

Was wir mit den umsatzrelevanten Teilen machen

Product-Strukturdaten mit echtem Offer und Verfügbarkeit, damit Rich Results einen Preis zeigen. Korrekte Canonicals über Varianten- und Filter-URLs - ein facettierter Katalog erzeugt Tausende beinahe identischer Adressen, und sich selbst überlassen verbrauchen sie Ihr Crawl-Budget für Parameterkombinationen, die niemand sucht.

Core Web Vitals als Commerce-Kennzahl behandelt statt als technische, gemessen auf den Templates, die Traffic tragen, mit einem in der CI durchgesetzten Budget, damit die nächste Theme-Änderung es nicht zunichtemacht.

Welches Backend

Shopify (Storefront API), Commerce Layer, Medusa, BigCommerce oder Ihr eigener Dienst. Die Storefront-Architektur ist in jedem Fall dieselbe; was sich unterscheidet, ist die Datenschicht - und genau die typisieren und cachen wir sorgfältig.

Sind Sie auf Shopifys eigenen Themes und erwägen einen Headless-Storefront, lautet die ehrliche Antwort: Es lohnt sich, wenn Sie ein echtes Frontend-Team haben oder uns, und es lohnt sich nicht, wenn nicht. Ein gut gepflegtes Liquid-Theme schlägt einen Headless-Storefront, den niemand besitzt.