COMPOSABLE COMMERCE MÜHENDİSLİĞİ
Headless Commerce
Hydrogen, Remix, Next.js + composable MACH mimarisi ile maksimum performans, esneklik ve ownership — frontend ile backend'i ayrıştıran modern commerce işletim sistemi.
Headless artık 'frontend'i ayırmak' değildir; MACH (Microservices + API-first + Cloud-native + Headless) prensiplerinde frontend + commerce engine + CMS + search + payment + identity'nin best-in-class seçildiği ve edge'de compose edildiği composable operasyondur.
2026 e-ticareti üç baskı altında: monolitik tema sistemleri hız + esneklik sınırına dayandı, edge runtime (Cloudflare Workers, Vercel Edge, Shopify Oxygen) ana dağıtım katmanı haline geldi, React Server Components + streaming SSR TTFB'yi saniyeler mertebesinden yüz milisaniyelere indirdi. Çoğu marka hâlâ 'hydrogen = sadece Shopify' sanıyor; commercetools / BigCommerce / Saleor gibi composable engine + Next.js + Sanity / Contentful + Algolia stack'ini değerlendirmiyor. Roibase headless operasyonu altı prensip üzerinden kurulur.
METODOLOJI
6 katmanlı composable commerce operasyonu
Assess → Architect → Compose → Migrate → Launch → Observe. Her katman deliverable + ADR + SLA ile teslim edilir.
01
ASSESS
Mevcut stack (monolit/temalar, app, CDN), performance baseline, SEO risk, operasyon maliyeti, ekip kapasite değerlendirmesi.
02
ARCHITECT
MACH mimarisi, vendor shortlist (engine/CMS/search/payment/identity), edge stratejisi, ADR dokümanları, RFP + POC.
03
COMPOSE
Framework (Hydrogen / Next.js), composable backend entegrasyonu, GraphQL gateway, event bus (webhook + queue), feature flag.
04
MIGRATE
Data ETL (catalog/customer/order/content), 301 mapping + hreflang + sitemap, staging parity, feature-complete smoke test.
05
LAUNCH
Canary rollout, feature flag'li launch, RUM + Sentry, BFCM-ready stress test, weekend on-call + war room.
06
OBSERVE
SLO/SLI takibi, aylık performance QBR, SEO rank monitoring, cost review, ADR güncelleme, runbook + eğitim + handoff.
— KARŞILAŞTIRMA
Monolitik tema vs template-only headless vs Roibase composable commerce
Üç yaklaşımın performans, esneklik, vendor lock-in, SEO + TCO farkı.
| Boyut | Monolitik tema | Template-only headless | Roibase composable commerce |
|---|---|---|---|
| Mimari | Tek monolit | Şablon + tek backend | MACH + composable + edge |
| Vendor esnekliği | Platform lock-in | Engine lock-in | Best-of-breed seçim (her katman) |
| Edge runtime | Yok | Kısmen | CF Workers / Vercel Edge / Oxygen |
| Performance (LCP) | 2.5-4.5s | 2.0-2.8s | < 1.5s baseline + RUM |
| Content + CMS | Platform CMS (kısıtlı) | Tek CMS | Sanity/Contentful/Storyblok best-fit |
| Search | Native search | Elasticsearch/Algolia başlangıç | Algolia/Typesense/Coveo + AI relevance |
| SEO | Tema bağımlı | SPA riskli | SSR + schema + 301 + hreflang mühendisliği |
| TCO 24. ay | Düşük ama teknik borç | Orta + tek vendor risk | Orta + ownership + esneklik + hız |
KANIT
Rakamlarla sonuç
75p mobile; headless migration + edge runtime sonrası.
Performance + streaming SSR + edge cache sonrası 6 ay ortalama.
SEO preservation + schema + hreflang + Core Web Vitals yeşil alan sonrası 12. ay.
Cloudflare Workers / Vercel Edge / Shopify Oxygen global CDN.
ISR + partial prerendering + edge cache stratejisi sonrası.
Engine + CMS + search + identity — her biri ayrı iter edilebilir.
NELER YAPIYORUZ
Çalışma kapsamı
Her hizmet başlığı, çıktı bazlı ölçülebilir bir iş paketidir. Roibase, strateji ve uygulamayı tek ekip içinde birleştirir.
Shopify Hydrogen + Oxygen
React Server Components + Remix + streaming SSR + edge deploy (Oxygen); Storefront API + Customer Account API + Shopify CDN.
Next.js + App Router + RSC
Server components + streaming + partial prerendering (Next 15) + Turbopack; Vercel Edge deployment + ISR + SWR.
Composable commerce engine
commercetools / Saleor / BigCommerce / Shopify Storefront API; best-fit engine seçimi + GraphQL + webhook + event-driven akış.
Headless CMS entegrasyonu
Sanity, Contentful, Storyblok, Hygraph, Strapi; content model, preview mode, editorial workflow + live preview.
Search + merchandising
Algolia / Typesense / Coveo / Meilisearch; instant search, federated search, AI relevance tuning, merchandising rules.
Edge caching + ISR + SWR
Cloudflare Workers + KV/R2 / Vercel Edge / Oxygen; stale-while-revalidate, incremental static regeneration, edge middleware.
Core Web Vitals mühendisliği
LCP < 1.5s / INP < 200ms / CLS < 0.05 bütçe; font preload + image optimization + critical CSS + bundle splitting + RUM.
Identity + payment + subscription
Auth0 / Clerk / Supabase Auth + Stripe / Adyen + Recharge / Bold; passkey + SCA + 3DS2 + Apple/Google Pay.
Migration playbook
Magento / WooCommerce / legacy Shopify / BigCommerce headless'e; 301 mapping, feature parity, staging/canary, go-live weekend.
A/B + feature flags + observability
GrowthBook / Statsig / LaunchDarkly + Sentry / Datadog + OpenTelemetry; canary rollout + rollback + SLO/SLI metrik tree.
— GETİRİLER
Commerce altyapınızın somut değişimi
Edge runtime + composable + performance + SEO preservation + observability entegre olduğunda ROI tek metriğe bağlı kalmaz.
Hız dramatik artar
Streaming SSR + edge runtime + RSC ile LCP yarıdan fazla düşer; mobil dönüşüm ve Core Web Vitals'ı yeşile çeker.
Conversion büyür
Hız + kişiselleştirme + daha esnek UX ile funnel drop düşer, sepet terk oranı azalır.
SEO rank korunur ve büyür
SSR + schema.org + 301 + hreflang + sitemap mühendisliği sayesinde migration dip'i 2-3 haftalık, ardından rank artışı.
Vendor esnekliği açılır
Engine / CMS / search / identity her katmanda değiştirilebilir; vendor lock-in + yıllık fiyat baskısı azalır.
Ürün hızı büyür
Feature flag + canary + ISR ile yeni feature'lar günlük değil saatlik yayına alınabilir; deneme hızı artar.
Operasyon maliyeti düşer
Monolit üzerine yamanan app'lerin yerini composable servisler alır; edge cache ile origin yükü azalır, infra maliyeti optimize olur.
TESLİMATLAR
Her headless engagement'ında aldıklarınız
Kurulum + 6 aylık operasyon paketinde sabit teslimat listesi; ek ücret sürprizi yok.
Headless feasibility + ROI raporu
Mevcut stack audit, TCO modeli, performance baseline, SEO risk, ekip kapasite değerlendirmesi; 50-80 sayfa.
MACH mimari + ADR dokümanları
Engine + CMS + search + payment + identity + edge + CI/CD vendor kararları, her biri gerekçeli ADR'lar.
Framework seçimi + POC
Hydrogen / Next.js / Remix / Nuxt karar matrisi + 2-3 hafta POC + performance benchmark raporu.
Composable backend kurulum
commercetools / Saleor / BC / Shopify Storefront API entegrasyonu + GraphQL gateway + webhook + event bus.
Headless CMS şeması
Sanity / Contentful / Storyblok content model, preview mode, editorial workflow + live preview.
Search + merchandising
Algolia / Typesense / Coveo kurulum + index şeması + AI relevance tuning + merchandising rules.
Edge runtime + cache stratejisi
Cloudflare Workers / Vercel Edge / Oxygen deploy + KV/R2 + ISR + SWR + edge middleware.
Identity + payment + subscription
Auth0 / Clerk / Supabase Auth + Stripe / Adyen entegrasyonu + passkey + SCA + 3DS2 uyumlu flow.
SEO preservation paketi
301 mapping, canonical, schema.org, hreflang, sitemap, robots, ITA (International Targeting); rank monitoring dashboard.
Feature flag + A/B altyapısı
GrowthBook / Statsig / LaunchDarkly + canary + kill switch + experiment metric tree.
Observability + SLO/SLI
Sentry / Datadog + OpenTelemetry + Lighthouse CI + RUM (SpeedCurve) + PagerDuty; incident runbook.
Runbook + eğitim + 3 aylık destek
Architecture + deploy + rollback + monitoring runbook, ekip eğitim oturumları, 90 gün destek + on-call.
— KAPSAM
Neleri yapıyor, neleri yapmıyoruz
Composable commerce scope'u yazılı; sürprizleri ve sonradan ek faturayı önler.
Yapıyoruz
- MACH + composable commerce mimarisi + ADR
- Shopify Hydrogen + Oxygen (RSC + Remix)
- Next.js + App Router + RSC + Vercel Edge
- commercetools / Saleor / BC / Shopify Storefront API
- Sanity / Contentful / Storyblok headless CMS
- Algolia / Typesense / Coveo search + merchandising
- Edge runtime (Cloudflare Workers / Vercel Edge / Oxygen)
- SEO preservation (301 / schema / hreflang / sitemap)
- Feature flag + canary + rollback + observability
- Identity + payment + subscription entegrasyonu
- Core Web Vitals mühendisliği + RUM
- Runbook + eğitim + 90 gün destek + on-call
Yapmıyoruz
- Monolitik Magento / WooCommerce tema geliştirme (sadece migration)
- ERP / OMS / WMS çekirdek geliştirme (entegre ederiz)
- Reklam bütçesi işletme (Acquisition birimi ayrı engagement)
- Fiziksel lojistik / depo / customs operasyonu
- Kredi kartı işleme / PCI scope sahipliği (payment vendor üzerinde kalır)
- Banking / KYC / AML regülasyon süreçleri (partner firmalarla)
- Müşteri hizmetleri outsource (araç kurar, işletme müşteride)
- Fake review / bot trafik / suni hız manipülasyonu
NASIL ÇALIŞIYORUZ
12-16 haftalık kurulum + migration, ardından aylık operasyon
Hafta 1-2: assess + feasibility
Mevcut stack audit, performance baseline, SEO risk, TCO modeli, ekip kapasite + ADR taslak.
Hafta 3-4: architect + vendor RFP/POC
MACH mimarisi, engine/CMS/search/payment/identity shortlist + RFP + 2-3 hafta POC.
Hafta 5-6: compose + framework setup
Hydrogen / Next.js setup, Storefront API / commerce engine entegrasyonu, GraphQL gateway, edge runtime deploy.
Hafta 7: CMS + search + merchandising
Sanity / Contentful content model, Algolia / Typesense index + relevance tuning, merchandising rules.
Hafta 8: identity + payment + subscription
Auth0 / Clerk + Stripe / Adyen + Recharge + 3DS2 + passkey + accelerated checkout.
Hafta 9-10: data ETL + 301 mapping
Catalog / customer / order / content ETL, URL mapping, 301 plan, hreflang + sitemap + schema.
Hafta 11-12: staging + canary + BFCM stress
Staging parity, smoke test, canary rollout, feature flag'li launch, BFCM stress test + war room planı.
Hafta 13+: go-live + observe + QBR + destek
Go-live weekend playbook, RUM + Sentry + SLO/SLI, monthly QBR, runbook + eğitim + 3 ay destek.
— ARAÇ SETİ
Kullandığımız araçlar — vendor-agnostik ama kararlı seçim
Her müşteri için uygun olanı seçeriz; bağımsızlığımızı komisyon almayarak koruruz.
FRAMEWORK & FRONTEND
COMMERCE & CMS
SEARCH & PERSONALIZATION
EDGE & OBSERVABILITY
SIK SORULAR
Sık sorulan sorular
— SÖZLÜK
Composable commerce temel kavramları
Mühendislik, ürün, operasyon ve pazarlama ekiplerinizin ortak dili.
- MACH
- Microservices + API-first + Cloud-native + Headless prensiplerinin kısaltması; composable commerce mimarisinin çerçevesi, MACH Alliance tarafından tanımlandı.
- Composable Commerce
- Tek bir monolitik platform yerine, her işlev için best-of-breed vendor seçilerek compose edilen commerce mimarisi; engine + CMS + search + payment + identity ayrı servisler.
- Headless
- Frontend (presentation) ile backend (commerce engine / CMS) arasındaki katmanın API üzerinden ayrıştırılması; frontend'in herhangi bir framework + runtime'da çalışmasını sağlar.
- React Server Components (RSC)
- React 18+ ile gelen, sunucuda render edilen, istemciye hiç JS göndermeyen component modeli; Next.js App Router + Shopify Hydrogen native kullanır, bundle + hydration cost'unu düşürür.
- Streaming SSR
- Sayfanın HTML'inin tek seferde değil, hazır olan parçalardan başlayarak akışla sunucudan istemciye gönderildiği render modeli; TTFB ve LCP düşer.
- Edge Runtime
- Kodun, kullanıcıya coğrafi olarak en yakın CDN node'unda çalıştırıldığı runtime; Cloudflare Workers, Vercel Edge, Shopify Oxygen başlıca örnekler. Latency minimize, global tutarlılık.
- ISR (Incremental Static Regeneration)
- Statik olarak build edilen sayfaların arka planda belirli aralıklarla veya trigger'la yeniden oluşturulması; hem statik hızı hem taze veri.
- Stale-While-Revalidate (SWR)
- HTTP cache stratejisi; kullanıcıya stale içerik anında gösterilirken arka planda taze versiyon fetch edilir. Hız + freshness dengesi.
- Storefront API
- Shopify'ın public GraphQL API'si; headless / custom frontend / mobile uygulamaların ürün + koleksiyon + sepet + checkout verisine erişmesini sağlar.
- commercetools
- Composable commerce engine; API-first + MACH uyumlu, enterprise B2B + B2C senaryolarında en çok kullanılan engine'lerden biri. commercetools Frontend + Studio ekosistemi mevcut.
- ADR (Architecture Decision Record)
- Bir yazılım mimarisi kararının bağlamını, seçenekleri, sonucunu ve tradeoff'larını yazılı kayıt altına alan dokümantasyon formatı; composable stack'te vendor kararları için standart.
- Feature Flag
- Kodun deploy'undan bağımsız, runtime'da aç/kapa yapılabilen özellik anahtarı; canary release, A/B test, kill switch senaryolarında kullanılır; GrowthBook/Statsig/LaunchDarkly başlıca araçlar.
- SSR (Server-Side Rendering)
- HTML'in sunucuda render edilip tarayıcıya hazır olarak gönderildiği yaklaşım. SEO ve LCP için CSR'a göre üstün; Nuxt 3, Next.js, Remix gibi framework'lerin temel modu. Ölçeklendirme için edge cache ve hydration stratejisi gerekir.
- CSR (Client-Side Rendering)
- Sunucudan boş HTML iskelet ve JS bundle gönderip tarayıcıda render eden yaklaşım. SPA'lerin tipik modu; ilk paint yavaş, SEO için ek route prerendering ister. Yetersiz ağ veya düşük cihazda LCP ciddi şekilde bozulur.
- Edge Functions
- CDN'in kendisinde çalışan hafif compute katmanı (Cloudflare Workers, Vercel Edge, AWS Lambda@Edge). Geo-routing, A/B test bucketlama, header manipülasyonu ve auth'u origin'e gitmeden milisaniyelerle yapar; cold-start neredeyse yok.
- CDN (Content Delivery Network)
- Statik (ve giderek dinamik) içeriği coğrafi olarak dağıtılmış edge node'larda cache'leyen ağ. TTFB ve LCP'yi düşürür, origin'i DDoS ve trafik dalgalarına karşı korur. Cloudflare, Fastly, Akamai, AWS CloudFront — modern stack'in olmazsa olmazı.
— KARAR AĞACI
Composable commerce operasyonu size uygun mu?
4 soruya Evet/Hayır cevap verin; sonuç net olsun.
01 / 04
Yıllık GMV'niz $2M+ veya aktif B2B operasyonunuz var mı?
MACH + composable yatırımının ROI için asgari eşik; daha küçük mağazalarda OS 2.0 daha hızlı ROI verir.
— BAŞLAYALIM
E-ticaretinizin frontend hızını neredeyse haftada bir ne sınırlıyor?
Mevcut sitenizi tarayıp Web Vitals, cache stratejisi, SEO risk haritası ve headless ROI modelini çıkarıyoruz.