Başsız Ticaret Mimarisi: Ön Ucu Arka Uçtan Ayırmak

Geleneksel e-ticaret platformları, vitrini (müşterilerin gördükleri) arka uçla (envanter, siparişler, ödemeler) birleştirir. Bu bağlantı, tek mağazanın bir masaüstü web sitesi olduğu durumlarda anlamlıydı. Günümüzde ticaret mobil uygulamalarda, sesli asistanlarda, IoT cihazlarında, sosyal platformlarda, kiosklarda ve progresif web uygulamalarında gerçekleşiyor. Yekpare bir platform, tüm bu temas noktalarına ödün vermeden hizmet veremez.

Başsız ticaret, ön uç sunum katmanını arka uç ticaret motorundan ayırarak bunları API'ler aracılığıyla birbirine bağlar. Arka uç; kataloğu, alışveriş sepetini, ödemeyi, ödemeleri ve yerine getirme işlemlerini yönetir. Ön uç herhangi bir şey olmakta özgürdür: inanılmaz hızlı bir Next.js sitesi, bir React Native mobil uygulaması, bir ses becerisi veya bunların üçü aynı anda.

Önemli Çıkarımlar

• Başsız mimari, basitliği esneklikle değiştirir — her işletme için doğru seçim değildir
• API öncelikli tasarım, tek bir ticari arka uçtan birden fazla ön uç (web, mobil, IoT) sağlar
• Next.js ve Remix, başsız vitrinler için baskın ön uç çerçeveleri olarak ortaya çıktı
• Başsızın toplam maliyeti monolitikten daha yüksektir, ancak performans ve kişiselleştirme kazanımları, yıllık geliri 5 milyon doların üzerinde olan markalar için bunu haklı çıkarıyor

---

Başsız ve Monolitik: Mimari Karşılaştırması

Temel farklılıkları anlamak, başsızın işletmeniz için doğru olup olmadığına karar vermenize yardımcı olur.

Monolitik Kazandığında

Hızlı bir şekilde faaliyete geçmesi gereken, küçük bir geliştirme ekibine sahip olan ve öncelikle standart bir web mağazası aracılığıyla satış yapan işletmeler için Shopify (standart bir temaya sahip) veya WooCommerce gibi monolitik platformlar pragmatik seçimlerdir. Hız ve maliyet özelleştirmeden daha önemli olduğunda tema sisteminin kısıtlamaları kabul edilebilir.

Başsız Kazandığında

Aşağıdakilere ihtiyacınız olduğunda Başsız daha iyi bir seçim haline gelir:

• Bir saniyeden kısa sürede sayfa yüklemesi: Statik oluşturma ve uç önbelleğe alma, sunucu tarafından oluşturulan hiçbir monolitin eşleşemeyeceği bir performansa ulaşır
• Birden fazla temas noktası: Web, mobil uygulama ve mağaza içi kiosk'un tümü ticari özelliklere ihtiyaç duyar
• Özel ödeme akışları: Abonelik modelleri, B2B fiyatlandırması, paket ürünler veya monolitik ödemenin destekleyemediği çok adımlı yapılandırıcılar
• Marka farklılaşması: Aynı tema motorunu kullandığınız için rakibinizin Shopify mağazası sizinkine benzer. Başsız, farklı bir şey oluşturmanıza olanak tanır.
• İçerik odaklı ticaret: Editoryal içerik, arama defterleri ve ürün hikayeleri ticaretle kusursuz bir şekilde harmanlanmıştır; bir mağazaya iliştirilmiş bir blog değildir

---

API-Önce Tasarım İlkeleri

API katmanı, ticaret arka ucunuz ile ön uçlarınız arasındaki sözleşmedir. Bunu doğru yapın ve mimariniz ölçeklensin. Yanlış anladığınızda dağıtılmış bir monolit elde edersiniz; başsız olmanın tüm karmaşıklığı ve hiçbir faydası yoktur.

Ticaret için API Tasarımı

Bir ticaret API'sinin şu temel işlemleri desteklemesi gerekir:

• Katalog: Ürünlere göz atın, arayın, özelliklere göre filtreleyin, çeşitleriyle birlikte ürün ayrıntılarını alın
• Sepet: Sepet oluşturun, ürün ekleyin/kaldırın, indirim uygulayın, vergi ve gönderim bedeliyle toplamları hesaplayın
• Ödeme: Gönderim bilgilerini toplayın, gönderim yöntemini seçin, ödemeyi işleyin, sipariş oluşturun
• Müşteri: Kayıt olun, giriş yapın, sipariş geçmişini görüntüleyin, adresleri yönetin, ödeme yöntemlerini kaydedin
• İçerik: Sayfalar, blog gönderileri, gezinme menüleri, banner'lar — ticareti yönlendiren editoryal içerik

GraphQL ve REST

Shopify'ın Storefront API'si GraphQL'i kullanır ve bunun iyi bir nedeni vardır; bir ürün sayfasının ürün verilerine, çeşit verilerine, resimlere, incelemelere ve ilgili ürünlere ihtiyacı vardır. REST'te bu 5 API çağrısıdır. GraphQL'de, bileşeninizin ihtiyaç duyduğu alanları tam olarak döndüren tek bir sorgudur.

API Ağ Geçidi

Bir API ağ geçidi, ön uçlarınız ile arka uç hizmetleriniz arasında yer alır ve şunları sağlar:

• Kimlik doğrulama: Belirteç doğrulama, hız sınırlama, API anahtar yönetimi
• Yönlendirme: İstekleri uygun arka uç hizmetine yönlendirin
• Önbelleğe alma: Ağ geçidi düzeyinde okuma ağırlıklı uç noktaları (ürün kataloğu) önbelleğe alın
• Dönüşüm: Arka uç yanıtlarını ön uç tüketimine göre uyarlayın
• İzleme: Gecikmeyi, hata oranlarını ve uç nokta başına kullanımı izleyin

---

Ticaret Arka Uç Seçenekleri

Seçtiğiniz başsız arka uç, ticaret yeteneklerinizi, API kalitenizi ve toplam maliyetinizi belirler.

Shopify Storefront API'nin Ayrıntılı İncelemesi

Shopify'ın Storefront API'si en popüler başsız ticaret API'sidir. Şunları sağlar:

• Ürün kataloğu: Meta alanlarla birlikte tam ürün ve koleksiyon sorguları
• Sepet: Otomatik vergi ve gönderim bedeli hesaplamasıyla sunucu tarafı sepet yönetimi
• Ödeme: Shopify ödeme sayfasına yönlendirin veya Checkout API'yi kullanın (yalnızca Plus)
• Müşteri: Hesap oluşturma, oturum açma, sipariş geçmişi
• İçerik: Sayfalar, bloglar ve API aracılığıyla gezinme

Shopify Hydrogen (React çerçevesi) ve Storefront API birlikte mükemmel bir başsız deneyim sağlar. Sınırlama, ödemeyle ilgilidir; Plus olmayan planlarda, ödemenin Shopify'ın barındırılan ödeme sayfasına yönlendirilmesi gerekir, bu da tamamen özel deneyimi bozar.

Açık Kaynak: Medusa.js

Medusa.js, önemli ölçüde ilgi gören bir Node.js/TypeScript açık kaynaklı ticaret motorudur. Şunları sağlar:

• Ödemeler, yerine getirme ve bildirimler için eklentilere sahip modüler mimari
• Abone düzenine sahip olay odaklı arka uç
• Çoklu bölge ve çoklu para birimi desteği
• Yönetici kontrol paneli dahil
• Ticaret akışının her yönü üzerinde tam kontrol

Halihazırda bir Node.js yığını (ECOSIRE'nin NestJS arka ucu gibi) çalıştıran ekipler için Medusa, yeni bir dil veya çerçeve sunmadan doğal olarak entegre olur.

---

Kafasız Ticaret için Ön Uç Çerçeveleri

Ön uç, kafasız ticaretin en büyük avantajını sağladığı yerdir: performans, tasarım ve kullanıcı deneyimi üzerinde tam kontrol.

Çerçeve Karşılaştırması

Varsayılan Seçim Olarak Next.js

Next.js, iyi nedenlerden dolayı başsız ticaret ön uçlarına hakimdir:

• React Sunucu Bileşenleri: Sunucudaki verileri alın, istemciye HTML akışı yapın, statik içerik için sıfır JavaScript
• Artımlı Statik Yenileme: Arka planda yeniden doğrulanan statik sayfalar — dinamik verilerle statik performans
• Edge ara yazılımı: Kişiselleştirme, A/B testi ve coğrafi konum için CDN kenarında mantık çalıştırın
• Görüntü optimizasyonu: Otomatik WebP/AVIF dönüştürme, yavaş yükleme ve hızlı yanıt veren boyutlandırma ile yerleşik sonraki/görüntü
• Vercel dağıtımı: Her çekme isteği için otomatik önizleme URL'leriyle tek tıkla dağıtım

Next.js başsız bir vitrin genellikle şunları başarır:

• Deniz Feneri Performansı: 95-100 (yekpare Shopify temaları için 60-80'e karşılık)
• En Büyük İçerikli Boya: 1,5 saniyeden kısa (3-5 saniyeye kıyasla)
• Etkileşime Geçiş Süresi: 2 saniyeden kısa (5-8 saniyeye kıyasla)
• Önemli Web Verileri: Google Search Console'da tamamı yeşil

Başlangıç Şablonları

Çoğu başsız ticaret platformu Next.js başlangıç şablonlarını sağlar:

• Shopify: create-hydrogen-app (Remix tabanlı) veya next-shopify-starter (topluluk)
• Medusa: medusa-nextjs-starter (resmi)
• Satışçı: saleor-storefront (resmi, Next.js + GraphQL)
• commercetools: commercetools-frontend (resmi)

Bu başlangıçlar, sıfırdan oluşturmak yerine özelleştirebileceğiniz önceden oluşturulmuş sayfalar (ürün listesi, ürün ayrıntıları, sepet, ödeme, hesap) sağlayarak geliştirmeyi hızlandırır.

---

İçerik ve Ticaret Entegrasyonu

Başsız ticaret, editoryal içerik ve ticaretin kusursuz bir şekilde harmanlandığı, önce içerik yaklaşımına olanak tanır. "Düz Ayaklar için En İyi 10 Koşu Ayakkabısı" hakkındaki bir blog yazısı, alışveriş yapılabilir ürün kartlarını satır içi olarak yerleştirebilir. Lookbook sayfası doğal olarak ürün detay sayfasına dönüşür.

İçerik Yönetimi Seçenekleri

ECOSIRE yığını için, kod tabanında yönetilen MDX dosyaları (ecosire.com'un blogunda kullanıldığı gibi), başka bir SaaS bağımlılığı eklemeden içerik odaklı ticaret sunmak için Odoo'nun ürün verileriyle birleştirilir.

Birleşik Veri Katmanı

Ön ucun birden fazla kaynaktan gelen verileri (ticaret API'sinden ürün verileri, CMS'den editoryal içerik, kimlik doğrulama sisteminden kullanıcı verileri ve veri platformundan analizler) birleştirmesi gerekir. Birleşik bir veri katmanı (React bağlam sağlayıcıları veya durum yönetimi kitaplığı olarak uygulanır), bu kaynakları bileşenlerin tükettiği tutarlı bir veri modelinde birleştirir.

---

Performans Optimizasyonu

Performans, başsız kalmanın birincil nedenidir. Standart bir temaya sahip yekpare bir Shopify mağazası 3-5 saniyede yüklenir. İyi tasarlanmış başsız bir vitrin 1,5 saniyeden kısa sürede yüklenir. Bu fark doğrudan gelire dönüşür; yükleme süresindeki her 100 ms'lik azalma, dönüşüm oranını %1 artırır.

Önbelleğe Alma Stratejisi

Görüntü Optimizasyonu

Ürün resimleri genellikle e-Ticaret sayfalarındaki en ağır kaynaklardır. Başsız size tam kontrol sağlar:

• Biçim: WebP'yi Chrome/Firefox'a, AVIF'yi Safari 16+'ya, JPEG/PNG geri dönüşüne yayınlayın
• Boyutlandırma: Derleme sırasında duyarlı boyutlar (320, 640, 960, 1280, 1920 piksel) oluşturun
• Geç yükleme: Ekranın alt kısmındaki görselleri yalnızca kullanıcı ekranı kaydırdığında yükleyin
• CDN teslimatı: Görüntüleri en yakın uç konumdan (Cloudflare, Imgix veya Shopify'ın CDN'si) yayınlayın
• Yer tutucu: Tam görüntü yüklenirken bulanık, düşük çözünürlüklü bir yer tutucu gösterir (bulanık karma)

---

Geçiş Yolu: Monolitikten Başsızlığa

Başsız kalmak büyük bir yeniden yazmayı gerektirmez. Aşamalı geçiş, riski azaltır ve artımlı olarak değer sağlar.

Aşama 1: API Etkinleştirme (1-4. Haftalar)

Mevcut platformunuzda API erişimini etkinleştirin. Shopify'daysanız Storefront API'yi etkinleştirin. WooCommerce kullanıyorsanız REST API'nin yapılandırıldığından emin olun. Henüz ön ucu değiştirmeyin; yalnızca arka uç verilerinize API aracılığıyla erişilebildiğini doğrulayın.

2. Aşama: Önce İçerik Sayfaları (5-8. Haftalar)

Ticari olmayan içerik için ilk başlıksız sayfalarınızı oluşturun: Hakkında, Blog, İletişim, SSS. Mevcut mağazanızın yanında konuşlandırın. Bu, kritik ticaret akışına dokunmadan ekibin ön uç çerçevesine aşina olmasını sağlar.

3. Aşama: Ürün Sayfaları (9-14. Haftalar)

Ürün listeleme ve ürün detay sayfalarını başsız ön uca taşıyın. Sepeti ve ödemeyi yekpare platformda tutun. Bu, performans açısından en yüksek etkili aşamadır (ürün sayfaları en ağır olanıdır) ve en düşük risktir (ödeme işlemi hâlâ her zaman olduğu gibi çalışır).

4. Aşama: Sepet ve Ödeme (15-20. Haftalar)

Son olarak, sepeti ve ödeme işlemini taşıyın. Bu en riskli aşamadır çünkü ödeme doğrudan geliri etkiler. Kapsamlı testler yapın, eski ve yeni ödeme arasında A/B testleri yapın ve dönüşüm oranlarını günlük olarak izleyin. Shopify için bu aşama, Shopify'ın barındırılan ödeme sayfasında kalmak anlamına gelebilir (ki bu iyidir, iyi dönüşüm sağlar).

Başsız vitrininizi besleyen çok kanallı entegrasyonun tamamı için sütun gönderisine bakın: The Ultimate e-Commerce Integration Guide.

---

Sıkça Sorulan Sorular

Geliri 1 milyon doların altında olan bir işletme için başsız ticaret doğru mu?

Muhtemelen hayır. Headless'ın geliştirme ve bakım maliyetlerini (30.000 - 150.000 $ oluşturma, 2.000 - 10.000 $/ay devam ediyor) 1 milyon $'ın altındaki geliri haklı çıkarmak zordur. Yekpare bir platform (Shopify, WooCommerce) kullanın ve tasarruf edilen bütçeyi pazarlama ve ürüne yatırın. Geliriniz 5 milyon doları aştığında ve büyümeniz platform sınırlamalarıyla sınırlandığında başsız kalmayı düşünün.

Shopify'ı başsız bir arka uç olarak kullanıp Shopify uygulamalarını kullanmaya devam edebilir miyim?

Bazı Shopify uygulamaları, denetimsiz kurulumlarla çalışır; çoğu bunu yapmıyor. Vitrin temasını değiştiren uygulamalar (açılır pencereler, inceleme widget'ları, üst satış banner'ları), başsız ön uç Shopify'ın temasını oluşturmadığı için çalışmaz. Arka uçta çalışan uygulamalar (envanter yönetimi, gönderim, analiz) çalışmaya devam eder. Headless'a geçmeden önce her uygulamanın API/webhook yeteneklerini kontrol edin.

Başsız bir vitrinle SEO'yu nasıl halledebilirim?

Next.js'deki sunucu tarafı oluşturma (SSR) veya statik oluşturma (SSG), arama motorlarının meta veriler, yapılandırılmış veriler ve içerikle birlikte tamamen işlenmiş HTML'yi görmesini sağlar; JavaScript yürütmesine gerek yoktur. Dinamik meta etiketler için generateMetadata() uygulayın, JSON-LD yapılandırılmış verilerini ekleyin (Ürün, BreadcrumbList, FAQPage) ve bir XML site haritası oluşturun. Başsız vitrinler, daha hızlı yükleme süreleri ve meta veriler üzerinde tam kontrol nedeniyle genellikle monolitik mağazalardan daha iyi SEO performansı elde eder. Uygulama ayrıntıları için ECOSIRE'ın 11 yerel ayarda çok dilli SEO'yu nasıl ele aldığına bakın.

Başsız ve şekillendirilebilir ticaret arasındaki fark nedir?

Başsız, ön ucu arka uçtan ayırır. Şekillendirilebilir ticaret bunu daha da ileri götürüyor; her özellik (arama, ödeme, CMS, PIM, OMS), API'ler aracılığıyla bağlanan ayrı, değiştirilebilir bir hizmettir. Başsız, şekillendirilebilirliğin bir alt kümesidir. Çoğu orta ölçekli işletme, başlıksız (ayrılmış ön uç) ile başlar ve ihtiyaçlar arttıkça şekillendirilebilir (her şey ayrıştırılmış) doğru evrilir.

Shopify Plus olmadan ödeme işlemini nasıl gerçekleştirebilirim?

Standart Shopify planlarında özel bir sepet deneyimi oluşturabilirsiniz ancak ödeme işleme için Shopify'ın barındırılan ödeme sayfasına yönlendirmeniz gerekir. Bu yönlendirme hafif bir deneyim boşluğu yaratıyor ancak Shopify'ın ödeme özelliği son derece yüksek dönüşüm oranlarına sahip (bunu milyonlarca mağaza için optimize etmişler). Pek çok marka için Shopify ödeme özelliğine sahip özel bir mağaza, önemli olduğu yerde özel deneyim (göz atma, keşif) ve önemli olduğu yerde kanıtlanmış dönüşüm (ödeme) ile pragmatik bir tatlı noktadır.

---

Sırada Ne Var

Başsız ticaret bir varış noktası değildir; müşteri deneyiminizin sürekli olarak gelişmesini sağlayan bir mimaridir. Kazanan markalar, vitrinlerini haftalık olarak yenileyen, yeni deneyimleri test eden ve durmaksızın optimizasyon yapan markalardır. Headless, size tema sisteminin sınırlamalarıyla kısıtlanmadan bunu yapma özgürlüğünü verir.

İster ilk kez başsız değerlendirme yapıyor olun ister yekpare bir platformdan geçiş yapıyor olun, şimdi vereceğiniz mimari kararlar, gelecek yıllar için teknik çevikliğinizi belirleyecektir.

Başsız ön ucunuzu Odoo'nun ticaret ve ERP arka ucuna bağlamak için ECOSIRE'ın entegrasyon hizmetlerini keşfedin veya başsız bir ticaret mimarisi değerlendirmesi için ekibimizle iletişime geçin.

---

ECOSIRE tarafından yayınlandı — işletmelerin Odoo ERP, Shopify eCommerce ve OpenClaw AI genelinde yapay zeka destekli çözümlerle ölçeklenmesine yardımcı oluyor.