In unserem Shopify-Architektur-Ratgeber zeigen wir dir die Grundlagen. Heute widmen wir uns einer strategischen Frage, die immer mehr Online-Händler stellen: Sollte dein Shopify-Shop "headless" sein? Und wenn ja, welches Framework passt zu deinem Projekt?
Bei smplx. beraten wir seit 2020 Shopify-Partner und Händler in dieser Entscheidung. Wir haben mit Hydrogen, Remix und Next.js gearbeitet – und wissen, dass es keine universelle Antwort gibt. Lass uns gemeinsam die richtige Architektur für dein Projekt finden.
Was ist Headless Commerce eigentlich?
"Headless" bedeutet, dass die Presentation Layer (dein Online-Shop) von der Commerce-Engine (Shopify) entkoppelt ist. Statt Liquid-Templates in deinem Shopify-Admin zu schreiben, nutzt du die Shopify Storefront API – und baust dein Frontend separat.
Traditioneller Shopify-Shop:
Shopify (Theme + Liquid) → Kunde
Headless Shopify:
Shopify (Admin + API) → Dein Frontend (Framework) → Kunde
Das klingt abstrakt, aber der Vorteil ist konkret: Du hast vollständige Kontrolle über UX, Performance und Technologie-Stack. Du bist nicht an Shopify's Theme-System gebunden.
Wann macht Headless Sinn?
- Ultra-Performance ist kritisch. Wenn jede Millisekunde zählt (wie bei J.Clay, +107% Revenue nach Performance-Optimierungen)
- Komplexe Integrations-Anforderungen. Wenn du viele externe Systeme anbinden musst
- Omnichannel-Strategie. Wenn du den gleichen Katalog auf Web, Mobile-App und anderen Kanälen nutzen möchtest
- Brand-Kontrolle. Wenn du absolute Freiheit beim Design brauchst
- Internationalisierung. Wenn du mehrsprachig komplexe Szenarien hast (wie FlexLoqq mit B2B + bilingual)
Wann solltest du nicht headless gehen?
- Kleine bis mittlere Shops ohne spezielle Performance-Anforderungen
- Limited Engineering-Ressourcen. Du brauchst Entwickler, die moderne JavaScript-Frameworks verstehen
- Häufige Inhaltsänderungen ohne technisches Team. Shopify's Admin ist einfach – dein Frontend ist es nicht
- Budget-Constraints. Hosting, Entwicklung, Monitoring – alles wird teurer
Die drei Hauptoptionen im Detail
1. Hydrogen: Shopify's Native Lösung
Was ist Hydrogen?
Hydrogen ist Shopify's eigenes Framework, basierend auf React und Remix. Es ist Purpose-Built für Shopify und bringt viel Kontext mit – Hydrogen "weiß", dass es mit Shopify arbeitet.
Pros:
- Offizielle Unterstützung durch Shopify
- Best Practices für Shopify Storefront API sind built-in
- Hydrogen DevTools für Debugging
- Direkter Zugriff auf Shopify-spezifische Features
- Community und Ecosystem aus Shopify-Agenturen
Cons:
- Weniger flexible als Remix oder Next.js
- Kleinere Community außerhalb der Shopify-Welt
- Performance hängt stark von deiner Implementierung ab
- Hosting muss zu Shopify's Vision passen (Oxygen empfohlen)
Wann wählen? Wenn du rein Shopify arbeiten möchtest und Shopify's Ecosystem schätzt. Für Standard-Anforderungen solide, aber nicht flexibel genug für komplexe Integrations-Szenarien.
Performance-Baseline: ~1.5-2.5s LCP (mit optimalem Setup)
2. Remix: Maximum Flexibilität
Was ist Remix?
Remix ist ein Full-Stack-Framework von den Machern von React Router. Es ist Framework-agnostisch und bietet dir maximale Kontrolle. Du kannst damit praktisch alles bauen – nicht nur Shops.
Pros:
- Ultra-flexible Architektur
- Hervorragende DX (Developer Experience)
- Built-in Form Handling und Data Loading (große Vorteile für Checkout)
- Server-side Rendering out-of-the-box
- Perfekt für komplexe Integrationen
Cons:
- Keine Shopify-spezifischen Shortcuts
- Größere Verantwortung bei der Architektur
- Weniger Dokumentation zu Shopify-Patterns
- Learning Curve für Developer, die Remix nicht kennen
Wann wählen? Wenn du Flexibilität brauchst und dein Team Remix-Erfahrung hat. Perfekt für komplexe B2B-Szenarien (wie FlexLoqq).
Performance-Baseline: ~1.2-2.0s LCP (hängt stark von Implementierung ab)
3. Next.js mit Storefront API: Der Klassiker
Was ist Next.js?
Next.js ist das meistgenutzte React-Framework im Web. Mit der Shopify Storefront API kannst du Next.js als Shopify-Frontend nutzen.
Pros:
- Riesige Community und Ökosystem
- Unzählige Integrationen und Libraries
- App Router bietet Server Components (Performance!)
- Vercel Hosting optimiert für Next.js
- Größtes Talent-Pool bei der Rekrutierung
- Perfekt für "moderne Web-Entwicklung"
Cons:
- Shopify-spezifische Patterns musst du selbst implementieren
- GraphQL-Client-Setup braucht Arbeit
- Mehr Boilerplate als Hydrogen
- Zu viel Flexibilität kann zu schlechteren Entscheidungen führen
Wann wählen? Wenn dein Team Next.js-Erfahrung hat oder du langfristig flexibel bleiben möchtest. Best-of-both-worlds Lösung.
Performance-Baseline: ~1.0-1.8s LCP (mit optimalen Image-Strategien)
Direkter Vergleich: Die Zahlen
| Aspekt | Hydrogen | Remix | Next.js |
|---|---|---|---|
| Learning Curve | Mittel (React + Shopify) | Mittel (Remix neu?) | Niedrig (React!) |
| Flexibilität | Medium | High | High |
| Shopify-Integration | Einfach | Einfach | Einfach |
| Community-Size | Klein | Mittel | Sehr Groß |
| Performance | Gut | Sehr Gut | Sehr Gut |
| Hosting-Optionen | Begrenzt (Oxygen) | Flexibel | Flexibel (Vercel!) |
| Learning-Ressourcen | Mittel | Niedrig | Sehr Hoch |
| Kosten (Hosting) | $$$$ | $-$$$ | $-$$ (Vercel) |
Real-World-Szenarien von smplx. Projekten
J.Clay: Performance über alles
J.Clay brauchte eine Ultra-schnelle Shop-Architektur. Nach 3 Iterationen mit Next.js erreichten wir:
- 107% Revenue-Steigerung durch verbesserte Performance
- LCP unter 1.2 Sekunden
- Critical Rendering Path optimiert mit Server Components
- Image-Strategy mit WebP und Lazy Loading
- Entscheidung: Next.js mit Image Optimization (richtig gewesen)
Lernen: Next.js' Image Component war der Game-Changer.
FlexLoqq: B2B trifft Mehrsprachigkeit
FlexLoqq brauchte:
- Komplexe B2B-Pricing-Logik (nicht in Standard-Shopify)
- Bilinguales Interface
- Custom Checkout-Flow
- Performance-kritisch für Enterprise-Kunden
Lösung: Remix mit Custom Middleware für Pricing-Logik Grund: Remix' Server-Action Pattern war perfekt für komplexes Pricing-Handling.
GraphQL und Storefront API
Egal welches Framework du wählst – die Storefront API bleibt die gleiche. Aber wie du sie nutzt, unterscheidet sich:
Hydrogen:
import { useShopQuery } from '@shopify/hydrogen';
export default function Products() {
const { data } = useShopQuery({
query: PRODUCTS_QUERY,
});
return <>{/* ... */}</>;
}
Next.js / Remix:
// Du schreibst eigene GraphQL-Clients
const response = await fetch(SHOPIFY_STOREFRONT_ENDPOINT, {
method: 'POST',
headers: { 'X-Shopify-Storefront-Access-Token': token },
body: JSON.stringify({ query: PRODUCTS_QUERY }),
});
Die Storefront API ist bei allen drei identisch – die DX unterscheidet sich.
Unsere Empfehlung für 2026
Wir bei smplx. raten zu:
- Kleine bis mittlere Shops: Bleib mit Liquid/Traditional Theme
- Performance-kritisch + Shopify-First: Hydrogen
- Komplexe Integration + flexible Team: Remix
- Team hat Next.js Skills + Langfristigkeit: Next.js
Die beste Wahl ist: Diejenige, die dein Team technisch am sichersten umsetzen kann.
Wir haben alle drei produktiv im Einsatz. Die Performance-Unterschiede sind minimal, wenn richtig implementiert. Der Unterschied liegt in Team-Kompetenz und Langzeitmaintenance.
Noch wichtig: Wenn du headless gehst
- Investiere in einen GraphQL-Client, nicht alles selbst schreiben
- Implementiere robust caching (wichtig für Storefront API Rate Limits)
- Nutze ISR/Revalidation (deine Daten müssen fresh sein)
- Staging Environment ist Muss – nicht Optional
- Monitoring und Error Tracking sind kritisch
Deployment und Hosting Strategien
Deine Wahl des Frameworks beeinflusst auch, wie und wo du deployst.
Hydrogen mit Oxygen (Shopify Hosting)
// shopify.app.toml
[build]
template = "hydrogen"
[build.dependencies]
node = "18.0.0"
[api.webhook]
address = "https://your-domain/webhooks"
Shopify's Oxygen ist speziell für Hydrogen optimiert. Zero-Config Deployment, automatische Skalierung, integrierte Analytics. Der Trade-off: Weniger Kontrolle, höhere Kosten.
Next.js mit Vercel
// next.config.js
import { shopifyDataHeader } from '@shopify/hydrogen-react';
export default {
headers() {
return [{
source: '/api/:path*',
headers: [
{
key: shopifyDataHeader,
value: 'true'
}
]
}];
},
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '*.shopifycdn.com'
}
]
}
};
Vercel ist optimize für Next.js – Edge Functions, ISR, Automatic Build Optimizations. Du zahlst pro Request, nicht pro Server.
Remix mit Cloudflare, AWS oder Self-Hosted
Remix läuft überall. Das gibt dir maximale Freiheit – und maximale Verantwortung:
// remix.config.js
export default {
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
},
serverModuleFormat: 'esm',
};
Cloudflare Workers sind billig (€0.15/Million Requests), AWS ist flexible, Self-Hosted gibt dir volle Kontrolle.
Die versteckte Komplexität: Headless Costs
Headless klingt nach "mehr Kontrolle, mehr Performance". Die Realität:
Entwicklungs-Kosten:
- Theme-Development: $20-50k
- Headless Development: $50-150k (3x teurer!)
Infrastruktur-Kosten:
- Traditional Theme: €0-100/Monat (Shopify macht alles)
- Headless: €300-1500/Monat (Hosting, CDN, Monitoring)
Maintenance-Kosten:
- Theme: Shopify updated, du musst nur Theme-Code warten
- Headless: Du musst Frontend + Backend + Deployment Pipeline warten
Wann ist es worth it?
- Wenn die +107% Revenue (wie J.Clay) deine zusätzlichen Kosten ausgleichen
- Wenn du 10.000+ Monthly Visitors hast (Performance matters)
- Wenn du Omnichannel brauchst (gleicher Code für Web + App)
Sonst: Bleib mit einem gut optimierten Traditional Theme.
Über den Autor
Claudio Gerlich ist Technical Architect bei smplx. und seit 2020 spezialisiert auf Shopify-Technologie. Mit smplx. haben wir über 50+ Shops in modernen Architekturen beraten und implementiert – von Traditional bis Headless. Wir kombinieren technische Tiefe mit praktischen Business-Anforderungen.
smplx. ist Shopify Technical Partner (seit 2020) mit Sitz in Coesfeld, NRW.