Headless Commerce für Skandika: Shopware, Strapi und Next.js im Zusammenspiel
Die Ausgangslage
Skandika ist ein etablierter Outdoor- und Fitness-Ausrüster aus Essen. Zelte für Familiencamping, Rudergeräte fürs Homeoffice, Schlafsäcke für jedes Wetter — das Sortiment ist breit, die Kundschaft anspruchsvoll. Der Online-Shop musste mitziehen.
Die Anforderungen:
- Drei Sprachen — Deutsch, Englisch, Französisch — aus einer Codebasis
- Schnelle Ladezeiten — Server-Side Rendering für SEO und Performance
- Flexible Inhalte — Marketing-Team soll Landingpages, Banner und Aktionen selbst pflegen können, ohne Entwickler zu fragen
- Shopware als Backend — bestehender Produktkatalog, Bestellwesen und ERP-Anbindung bleiben
Die Architektur: Best-of-Breed statt Monolith
Statt alles in einem System zu lösen, haben wir die Stärken spezialisierter Tools kombiniert:
| Komponente | Technologie |
|---|---|
| Produktkatalog, Warenkorb, Checkout | Shopware 6.6 |
| Content-Management (Landingpages, Banner, SEO-Texte) | Strapi (Headless CMS) |
| Frontend und SSR | Next.js mit React |
| Suche | Meilisearch |
| Infrastruktur | Hetzner Cloud, K3s Kubernetes, ArgoCD |
| Datenbank | Percona XtraDB Cluster (MySQL 8 HA) |
| Caching | Valkey (Redis) |
| Zahlungen | Mollie, PayPal |
Warum Headless?
In einem klassischen Shop-System (Shopware-Frontend, WooCommerce, Shopify) kontrolliert das Backend, wie die Seite aussieht. Das bedeutet: jede Design-Änderung muss durch das Shop-System. Jedes Feature ist an Plugin-Verfügbarkeit gebunden. Performance ist limitiert durch die Template-Engine.
Mit einem Headless-Ansatz trennen wir:
- Shopware kümmert sich um das, was es am besten kann: Produkte, Preise, Bestellungen, Lager
- Strapi gibt dem Marketing-Team ein modernes CMS für alle Inhalte
- Next.js rendert die Seiten serverseitig — schnell, SEO-optimiert und ohne Kompromisse beim Design
Die harten Probleme
Authentifizierung: Clerk trifft Shopware
Eine der kniffligsten Architekturentscheidungen: Wie verbindet man ein modernes Auth-System (Clerk) mit Shopware, das eigene Session-Verwaltung hat? Unsere Lösung: ein Guest-Account-Impersonation-Flow, bei dem Clerk die Authentifizierung übernimmt und im Hintergrund Shopware-Guest-Sessions verwaltet. Das Ergebnis: Nutzer erleben ein nahtloses Login — während im Backend zwei Systeme sauber miteinander kommunizieren.
Content-Autonomie: Der komponentenbasierte Page Builder
"Marketing pflegt Inhalte selbst" klingt einfach — in der Praxis ist es ein Architekturproblem. Wir haben in Strapi ein komponentenbasiertes Seitensystem gebaut: Das Marketing-Team kombiniert vorgefertigte Bausteine (Hero-Banner, Produktgrids, Text-Bild-Blöcke, Aktions-Counter) zu kompletten Landingpages — ohne eine Zeile Code. Neue Kampagne? Neue Seite bauen, Komponenten zusammenstellen, veröffentlichen. Kein Ticket, kein Deployment.
Was wir gebaut haben
Mehrsprachiger Shop mit Übersetzungs-Pipeline
Ein Shop, drei Märkte. Über Lingui und eine integrierte POEditor-Anbindung wechseln Kunden zwischen Deutsch, Englisch und Französisch — inklusive lokalisierter Produktbeschreibungen, Kategorie-Seiten und Marketing-Inhalte. Neue Übersetzungen werden zentral gepflegt und automatisch in den Build-Prozess integriert.
Meilisearch: Produktsuche in Millisekunden
Statt der Standard-Shopware-Suche setzen wir Meilisearch ein — eine dedizierte Suchmaschine, die den gesamten Produktkatalog über Strapi indiziert. Ergebnisse in Millisekunden, Tippfehler-tolerant, mit Filtern und Facetten. Der Unterschied zwischen "Suche funktioniert" und "Suche, die Kunden tatsächlich benutzen."
Custom Checkout mit ERP-gestützter Versandlogik
Der Checkout ist das Herzstück jedes Shops — und bei Skandika alles andere als Standard. Wir haben einen vollständig eigenen Checkout-Flow gebaut:
- Google Places Integration — Adressvalidierung in Echtzeit. Kunden tippen los, Google schlägt vor, Tippfehler und ungültige Adressen werden sofort erkannt
- ERP-basierte Versandoptionen — Die verfügbaren Lieferarten werden dynamisch aus ShippingClasses berechnet, die aus dem ERP kommen. Nicht jedes Produkt kann überall hin versendet werden (B-Stock z.B. nicht ins Ausland), und nicht jede Versandart ist für jede Bestellung verfügbar. Das System entscheidet automatisch
- Mehrstufiger Flow — Adresse, Versand, Zahlung — jeder Schritt validiert, bevor der nächste freigeschaltet wird
Shopware Clean Core: Updates ohne Schmerzen
Ein entscheidender Architektur-Grundsatz: Shopware bleibt auf Clean Core. Keine Plugins, keine Core-Modifikationen, keine Custom-Entities im Shopware-Backend. Alles, was über Standard-Commerce hinausgeht, liegt im Frontend oder in Strapi.
Warum das wichtig ist: Shopware-Updates sind dadurch einfach und kostengünstig. Kein Plugin-Kompatibilitäts-Roulette, keine Breaking Changes durch Drittanbieter, kein wochenlanges Testen nach jedem Minor-Update. Das spart dem Kunden langfristig tausende Euro an Wartungskosten.
Commerce-Komponenten
Für den Shop haben wir eine Bibliothek wiederverwendbarer UI-Komponenten gebaut — auf Basis von Radix UI für Barrierefreiheit:
- Produktkarten mit Varianten, Preisvergleichen und "In den Warenkorb"
- Kategorie-Seiten mit Filtern, Sortierung und über Strapi konfigurierbaren Content-Komponenten — Marketing kann pro Kategorie eigene Inhaltsblöcke einbauen
- Produktvergleich — bis zu vier Produkte nebeneinander mit allen technischen Spezifikationen
- B-Stock/Second-Chance-Bereich — Retouren-Verkauf mit eigener Versandlogik und länderspezifischen Einschränkungen
Selbst gehostete Infrastruktur
Die gesamte Plattform läuft auf unserer eigenen Kubernetes-Infrastruktur — kein AWS, kein verwalteter Cloud-Service:
- K3s-Cluster auf Hetzner Cloud — volle Kontrolle über Compute, Netzwerk und Kosten
- Percona XtraDB Cluster — MySQL 8 mit 3-Node High Availability, kein Single Point of Failure
- ArgoCD — GitOps-basiertes Continuous Deployment. Code auf main = automatisches Deployment
- Valkey (Redis) — Caching und Session-Management für schnelle Antwortzeiten
- End-to-End Error Tracking — vom Client-Side-Frontend über die API bis zur Datenbank. Fehler werden erkannt, bevor Kunden sie bemerken
- Automatisierte SSL-Zertifikate — via cert-manager und Let's Encrypt
- Monitoring — Prometheus, Grafana und Loki für Metriken, Dashboards und Log-Aggregation
Warum selbst gehostet? Weil wir damit volle Kontrolle über Performance, Kosten und Datenhoheit behalten. Und weil wir die Infrastruktur aktiv betreuen — von K3s-Upgrades über Datenbank-Operationen bis Performance-Tuning.
Das Ergebnis
skandika.com ist heute eine performante, mehrsprachige E-Commerce-Plattform. Das Marketing-Team baut eigenständig Kampagnen-Seiten über den Strapi-Page-Builder. Shopware läuft auf Clean Core — Updates sind schnell und günstig. Und wir sorgen dafür, dass die Infrastruktur sauber läuft und die Plattform kontinuierlich weiterentwickelt wird.
Die Headless-Architektur plus Clean-Core-Prinzip bedeutet: Wenn morgen ein neuer Zahlungsanbieter, eine neue Sprache oder ein neuer Vertriebskanal dazukommt, ist das eine Erweiterung — kein Rewrite. Und Shopware-Updates kosten Stunden, nicht Wochen.
Ready for your project?
Let's explore how AI-powered development can drive your business forward.
Start your project