Headless CMS Nedir? Strapi, Sanity ve Payload Karşılaştırması

Web geliştirme dünyası hızla evrimleşiyor. Geleneksel CMS sistemleri (WordPress, Joomla) yerini headless CMS mimarisine bırakıyor. Bu rehberde headless CMS'in ne olduğunu, ne zaman tercih edilmesi gerektiğini ve popüler platformları karşılaştıracağız.

İçindekiler

1. Headless CMS Nedir?
2. Headless vs Traditional CMS
3. Avantajlar ve Dezavantajlar
4. Popüler Headless CMS Platformları
5. Platform Karşılaştırması
6. Kullanım Senaryoları
7. Karar Rehberi

---

Headless CMS Nedir?

Geleneksel CMS Mimarisi

Geleneksel CMS (WordPress, Drupal) monolitik bir yapıdadır:

[Veritabanı] ← [CMS Backend + Frontend] → [Web Sitesi]
                    (Tek Sistem)

Özellikler:

• İçerik yönetimi ve sunum birleşik
• Tema/template sistemi
• Belirli teknolojiye bağımlı
• Tek çıktı formatı (HTML)

Headless CMS Mimarisi

Headless CMS'te içerik yönetimi ve sunum katmanı ayrılmıştır:

[Veritabanı] ← [Headless CMS (API)] → [REST/GraphQL API]
                                            ↓
                           ┌────────────────┼────────────────┐
                           ↓                ↓                ↓
                      [Web Site]     [Mobil App]      [IoT Cihaz]
                      (Next.js)      (React Native)   (Smart TV)

Özellikler:

• İçerik API olarak sunulur
• Frontend bağımsız
• Çoklu platform desteği
• Geliştirici özgürlüğü

"Headless" Ne Demek?

"Head" (baş) = Frontend/sunum katmanı "Headless" = Başsız, yani frontend olmadan

CMS sadece içerik yönetimi ve API sağlar, nasıl görüntüleneceği geliştiriciye bırakılır.

---

Headless vs Traditional CMS

Karşılaştırma Tablosu

WordPress vs Headless CMS

WordPress Tercih Edin:

• Basit blog veya kurumsal site
• Düşük bütçe
• Teknik ekip yok
• Hızlı kurulum gerekli
• Plugin ekosistemi önemli

Headless CMS Tercih Edin:

• Yüksek performans kritik
• Çoklu platform (web + mobil + IoT)
• Özel frontend deneyimi
• Modern teknoloji stack
• Ölçeklenebilirlik gerekli

---

Avantajlar ve Dezavantajlar

Headless CMS Avantajları

1. Teknoloji Özgürlüğü

• İstediğiniz frontend framework
• React, Vue, Svelte, Angular
• Next.js, Nuxt.js, Gatsby
• Native mobil uygulamalar

2. Performans

• Static site generation (SSG)
• CDN dağıtımı
• Minimum veritabanı sorgusu
• Core Web Vitals optimizasyonu

3. Güvenlik

• Ayrık backend (saldırı yüzeyi küçük)
• Güvenlik güncellemeleri bağımsız
• Admin panel gizli
• API token yetkilendirme

4. Ölçeklenebilirlik

• Serverless deployment
• Otomatik ölçeklendirme
• Global CDN
• Yüksek trafik yönetimi

5. Omnichannel İçerik

• Tek içerik, çoklu platform
• Web, mobil, IoT, kiosk
• İçerik tekrarı yok
• Tutarlı deneyim

Headless CMS Dezavantajları

1. Teknik Karmaşıklık

• Geliştirici gereksinimi
• Frontend ayrı oluşturulmalı
• DevOps bilgisi
• Daha uzun geliştirme süresi

2. Önizleme Zorluğu

• İçerik önizlemesi karmaşık
• Draft/publish akışları
• Live preview kurulumu gerekli

3. Maliyet

• Geliştirme maliyeti yüksek
• Hosting ayrı (frontend + CMS)
• Bazı platformlar pahalı

4. Editor Deneyimi

• WordPress kadar kolay değil
• Platform farklılıkları
• Eğitim gerekli

---

Popüler Headless CMS Platformları

1. Strapi (Açık Kaynak)

Genel Bakış:

• Node.js tabanlı
• Self-hosted veya Cloud
• Tamamen özelleştirilebilir
• Açık kaynak ve ücretsiz

Özellikler:

Strapi:
├── REST + GraphQL API
├── Özelleştirilebilir admin panel
├── Rol tabanlı erişim
├── Medya kütüphanesi
├── Internationalization (i18n)
├── Plugin ekosistemi
└── TypeScript desteği

Fiyatlandırma:

• Community: Ücretsiz (self-hosted)
• Pro: $99/ay (Cloud)
• Team: $499/ay
• Enterprise: Özel fiyat

En İyi Kullanım:

• Özel gereksinimler
• Tam kontrol isteyenler
• Self-hosting tercihi
• Bütçe bilinci

2. Sanity

Genel Bakış:

• Real-time collaboration
• Portable Text (zengin içerik)
• Hosted (SaaS)
• GROQ sorgu dili

Özellikler:

Sanity:
├── Real-time editing
├── Özelleştirilebilir studio
├── Image transformation CDN
├── GROQ (güçlü sorgu dili)
├── Portable Text
├── Scheduled publishing
└── Localization

Fiyatlandırma:

• Free: 3 kullanıcı, 10GB
• Growth: $15/kullanıcı/ay
• Enterprise: Özel fiyat

En İyi Kullanım:

• Takım çalışması
• Zengin içerik yapısı
• Real-time önizleme
• Hızlı başlangıç

3. Payload CMS

Genel Bakış:

• TypeScript-first
• Self-hosted
• Next.js entegrasyonu
• Code-first yaklaşım

Özellikler:

Payload:
├── TypeScript tam destek
├── Auto-generated API
├── Admin UI otomatik
├── Access control
├── Hooks sistemi
├── Local API
└── File uploads

Fiyatlandırma:

• Açık kaynak: Ücretsiz
• Cloud: Coming soon

En İyi Kullanım:

• TypeScript projeler
• Next.js entegrasyonu
• Geliştirici odaklı
• Özel iş mantığı

4. Contentful

Genel Bakış:

• Enterprise odaklı
• Güçlü CDN
• Extensive API
• SaaS model

Özellikler:

Contentful:
├── Content modeling
├── Rich Text editor
├── Asset management
├── Localization (100+ dil)
├── Webhooks
├── SDKs (çok dil)
└── Enterprise security

Fiyatlandırma:

• Free: 5 kullanıcı, sınırlı
• Basic: $300/ay
• Premium: Özel fiyat

En İyi Kullanım:

• Büyük kurumsal projeler
• Uluslararası içerik
• Güvenilirlik kritik
• Bütçe esnekliği var

5. Directus

Genel Bakış:

• Herhangi bir SQL veritabanı
• No-code admin panel
• Self-hosted veya Cloud
• Açık kaynak

Özellikler:

Directus:
├── Mevcut DB'ye bağlanma
├── Auto-generated API
├── Flows (otomasyon)
├── Rol bazlı erişim
├── File management
└── Translations

Fiyatlandırma:

• Self-hosted: Ücretsiz
• Cloud: $99/ay'dan başlayan

En İyi Kullanım:

• Mevcut veritabanı
• SQL bilgisi var
• Otomasyon ihtiyacı
• No-code tercih

---

Platform Karşılaştırması

Hızlı Karşılaştırma Tablosu

Detaylı Karşılaştırma

Performans:

1. Payload (en hızlı, yerel API)
2. Sanity (CDN optimizasyonu)
3. Strapi (self-host bağımlı)
4. Contentful (global CDN)
5. Directus (veritabanı bağımlı)

Özelleştirme:

1. Strapi (tam kontrol)
2. Payload (code-first)
3. Directus (no-code + code)
4. Sanity (studio özelleştirme)
5. Contentful (sınırlı)

Editor Deneyimi:

1. Sanity (en iyi UX)
2. Contentful (kurumsal)
3. Directus (temiz arayüz)
4. Strapi (özelleştirilebilir)
5. Payload (geliştirici odaklı)

Türkiye İçin Öneri:

---

Kullanım Senaryoları

1. Kurumsal Web Sitesi

Senaryo:

• 10+ dil desteği
• Çoklu marka/site
• Onay akışları
• Scheduled publishing

Önerilen: Contentful veya Sanity

2. E-ticaret + Blog

Senaryo:

• Ürün verileri ayrı sistemde
• Blog içeriği yönetimi
• Hızlı sayfa yüklemesi

Önerilen: Strapi veya Sanity

3. Mobil + Web Uygulaması

Senaryo:

• React Native mobil app
• Next.js web sitesi
• Paylaşılan içerik

Önerilen: Sanity veya Contentful

4. Startup MVP

Senaryo:

• Düşük bütçe
• Hızlı iterasyon
• Geliştirici ekip

Önerilen: Strapi (self-host) veya Sanity (free tier)

5. Mevcut Sistem Entegrasyonu

Senaryo:

• PostgreSQL veritabanı var
• Legacy sistem bağlantısı
• API layer gerekli

Önerilen: Directus veya Payload

---

Karar Rehberi

Geleneksel CMS Kullanın Eğer:

✅ Teknik ekibiniz yok ✅ Bütçeniz çok sınırlı ✅ Basit blog/kurumsal site ✅ Hazır tema yeterli ✅ Plugin'lere ihtiyaç var ✅ SEO'yu kendiniz yöneteceksiniz

Headless CMS Kullanın Eğer:

✅ Geliştirici ekibiniz var ✅ Yüksek performans kritik ✅ Özel frontend tasarımı istiyorsunuz ✅ Mobil uygulama da planlı ✅ Ölçeklenebilirlik gerekli ✅ Modern stack kullanmak istiyorsunuz

Platform Seçim Akış Şeması

Başla
  │
  ├── Bütçe var mı? ───[Hayır]──→ Strapi (self-host)
  │      │
  │   [Evet]
  │      │
  ├── Cloud isteniyor mu? ───[Hayır]──→ Strapi veya Payload
  │      │
  │   [Evet]
  │      │
  ├── Takım büyük mü? ───[Evet]──→ Contentful
  │      │
  │   [Hayır]
  │      │
  └── Real-time önemli mi? ───[Evet]──→ Sanity
           │
        [Hayır]
           │
           └──→ Strapi Cloud veya Directus Cloud

---

Uygulama Örneği: Next.js + Sanity

Kurulum

# Next.js projesi oluştur
npx create-next-app my-site

# Sanity CLI yükle
npm install -g @sanity/cli

# Sanity studio oluştur
sanity init

# Sanity client yükle
npm install @sanity/client

Veri Çekme

// lib/sanity.ts
import { createClient } from '@sanity/client'

export const client = createClient({
  projectId: 'your-project-id',
  dataset: 'production',
  useCdn: true,
  apiVersion: '2024-01-01',
})

// Sayfa'da kullanım
const posts = await client.fetch(`
  *[_type == "post"]{
    title,
    slug,
    publishedAt
  }
`)

---

Sıkça Sorulan Sorular

Headless CMS öğrenmek zor mu?

CMS kullanımı kolaydır. Zor olan frontend geliştirmedir. React/Next.js biliyorsanız headless CMS entegrasyonu birkaç saat sürer. Bilmiyorsanız, önce frontend öğrenmeniz gerekir.

WordPress'ten headless CMS'e geçmeli miyim?

WordPress siteniz iyi çalışıyorsa, geçiş gereksiz. Yeni proje başlıyorsanız veya performans/ölçeklenebilirlik sorunu varsa headless değerlendirin. Geçiş maliyeti ve öğrenme eğrisini hesaplayın.

Hangi headless CMS Türkçe destekliyor?

Headless CMS'ler dil bağımsızdır - Türkçe içerik rahatça girilir. Admin panel çoğunlukla İngilizcedir. Strapi ve Directus community çevirileri mevcut. Içerik lokalizasyonu tüm platformlarda desteklenir.

Self-hosted mı Cloud mu tercih etmeliyim?

Teknik ekibiniz varsa ve maliyet önemliyse self-hosted (Strapi, Payload, Directus). DevOps istemiyorsanız ve güvenilirlik kritikse Cloud (Sanity, Contentful). Hibrit yaklaşım da mümkün - development'ta self-hosted, production'da cloud.

Headless CMS ile SEO nasıl yönetilir?

SEO, frontend framework'ün sorumluluğundadır. Next.js, Nuxt.js gibi frameworkler mükemmel SEO desteği sunar. Meta etiketleri, sitemap, robots.txt frontend'de yönetilir. CMS sadece içerik sağlar.