Next.js für E-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 - und wenn er es ist, steht er auf einer Aufteilung des Vertrauens ohne den Browser und einer Rückkehrseite, die die Weiterleitung übersteht.

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.

Wie ein Projekt abläuft

Wir setzen bei Umsatz an und nicht bei Architektur. Welche Templates den Traffic tragen, wo der Funnel Leute verliert und was die aktuelle Plattform unmöglich macht.

Der Leistungsumfang, der folgt, benennt das Backend, die Templateliste, die URL-Zuordnung samt Weiterleitungsplan und das Performance-Budget, bepreist je Phase. Er wird vor Baubeginn unterschrieben. Besonders die URL-Zuordnung wird vorab vereinbart, denn ein Replatforming, das seine Weiterleitungen spät entdeckt, hat die Rankings bereits verloren.

Dann der Bau, je Phase deployt, mit dem Budget ab der ersten in der CI durchgesetzt.

Was Sie erhalten

Der Storefront, die typisierte Datenschicht gegen Ihr Commerce-Backend, die URL-Zuordnung samt Weiterleitungen und das Performance-Budget, das in der CI auf den Templates mit dem Traffic läuft.

Dazu die Teile, die niemand vorführt: die Cache-Strategie je Template schriftlich, was die Seite tut, wenn das Backend langsam oder weg ist, und die Facettenregeln, die entscheiden, welche Parameterkombinationen ein Crawler überhaupt erreichen darf.

Die beiden Zahlen, die im Handel Umsatz bewegen, stehen auf den Templates, die den Traffic tragen. LCP, das auf einer Produktseite fast immer das Bild ist. Und die übrigen Core Web Vitals, gemessen an echten Besuchern und nicht im Labor. Facetten, Paginierung und Parameter-URLs sind die andere Hälfte, und sie aus dem Index zu halten ist strukturell, keine Einstellung.