Google'ın bu konudaki otomatik tamamlaması, insanların ne istediği konusunda alışılmadık biçimde tutarlı. En sık beliren üç öneri:
best headless cms for next js
free headless cms for nextjs
nextjs headless cms open source
Ücretsiz, açık kaynak ve özellikle Next.js için. Bu yazı, bu kısa listeye sahip olduğunuzda adayları birbirinden ayıran şeyle ilgili — çünkü önemli olan fark SDK değil, istek geldiğinde içeriğin nerede olduğudur.
Uygulamanızın içinde. Payload, Next.js uygulamasının kendi içinde çalışır. HTTP'yi tamamen atlayan yerel bir API, kod-olarak-yapılandırma ve tek bir dağıtım elde edersiniz. Tek bir ürün için mükemmel bir geliştirici deneyimi.
Bedeli bağımlılık (coupling): CMS ve web sitesi bir dağıtımı, bir çalışma zamanını ve bir ölçeklenme birimini paylaşır. Herkese açık sitedeki bir trafik zirvesi, editörlerinizin kullandığı şeyde de bir zirvedir ve ön uç çerçevesini değiştirmek artık bir ön uç projesi olmaktan çıkar.
Uygulamanızın yanında. Strapi, Directus, Sanity, corpusctl. CMS ayrı bir servistir. İçeriği ağ üzerinden çekersiniz, bu da artık bir önbellekleme kararının sizde olduğu anlamına gelir.
O önbellekleme kararı, entegrasyonun kendisidir:
Bir ziyaretçi bir sayfa istediğinde, içerik nereden gelir — ve ne kadar eski olmasına izin verilir?
İstek başına çek. Basit ve doğru, ama CMS'iniz artık her sayfa yüklemesinin kritik yolunda. Onun gecikmesi sizin TTFB'niz ve onun kesintisi sizin kesintiniz. Bir yönetim panosu için sorun değil, bir pazarlama sitesi için yanlış.
Zaman penceresiyle ISR.revalidate: 60 ve içerik en fazla bir dakika bayat olur. İşe yarar ve editörlerin yayınladıktan sonra bir saati izlemesi anlamına gelir, ayrıca her pencere sona erişi birinin bedelini ödediği bir önbellek ıskasıdır.
Önceden derle, önbellekten servis et. İçerik yayın anında render edilir ve statik bir eser olarak servis edilir. En hızlı ve en ucuz — bir şey içerik değiştiğinde geçersiz kılmayı (invalidation) hallettiği sürece.
Çoğu ekip birinden başlar, fatura veya gecikme canını yaktığında ikiye geçer ve isteğe bağlı yeniden doğrulamayı (revalidation) bir webhook'a bağlayarak üçe ulaşır.
#Geçersiz kılma sorunu ve ona hiç sahip olmamanın yolu
Üçüncü seçenek doğru ve zor kısmı önbellek geçersiz kılmadır: sayfa bir hesaplamanın kopyasıdır ve o hesaplama her an değişebilir.
corpusctl, adresin kendisini değişmez kılarak sorunu yönetmek yerine ortadan kaldırır.
Yayınlama, derleme hattını çalıştırır: içerik doğrulanır, render edilir ve nesne deposunda bir hash ile adreslenen dosyaya yazılır, ardından manifest yenilenir. İstemci slug'ı yerel olarak bir manifest parçasına çözer, ardından o adresi nginx kenar önbelleğinden çeker.
Adres bir içerik hash'i olduğu için:
Aynı adres asla farklı içerik döndüremez.
Otuz gün önbelleğe almak güvenlidir.
Yayınlama yeni bir adres yazar; hiçbir şeyin temizlenmesi gerekmez.
İki HTTP isteği, ikisi de önbellekten. Okuma istemcisi token taşımaz, çünkü yetkilendirilecek bir şey yoktur: içerik zaten herkese açık ve zaten derlenmiş.
Manifest parçalıdır (sharded), böylece on bin girdisi olan bir alan bile büyüyen bir dizin yerine tek küçük bir dosya indirir.
#Taslak önizleme: herkesin en son bağladığı ve pişman olduğu kısım
Editörler yayınlanmamış çalışmayı görmeyi bekler. Next.js'te bu, bir gizli anahtarı doğrulayan, taslak modunu etkinleştiren ve yönlendiren bir rota anlamına gelir.
Aynı zamanda çoğu elle yazılmış uygulamada bir güvenlik açığıdır. İkisi de yaygın iki hata:
Gizli anahtarı === ile karşılaştırmak. Dize karşılaştırması ilk farklı karakterde kısa devre yapar, bu da uzunluğunu ve konumunu zamanlama üzerinden sızdırır. Sabit zamanlı bir karşılaştırma kullanın.
Her ne diyorsa ona yönlendirmek: slug.?slug=https://evil.example.com önizleme uç noktanızı kendi alan adınızda açık bir yönlendirmeye (open redirect) çevirir — kimlik avı için kullanışlıdır ve bir tarayıcı tarafından bulunacaktır.
@corpusctl/next ikisini de halleder:
Gizli anahtar karşılaştırması sabit zamanlıdır, mutlak URL'ler, protokole göreli yollar ve ters eğik çizgi hileleri reddedilir ve yönlendirme hedefi CMS'in doğruladığı değerdir — isteğin sağladığı değer değil. decision.reason herhangi bir dilde kendi metninize eşleyebileceğiniz kararlı, makine tarafından okunabilir bir değerdir.
İçeriği çekmek bir öğleden sonralık iş. Onu stillendirilmiş işaretlemeye (markup) çevirmek ise asıl projedir ve çoğu headless CMS benimsemesinin takıldığı yer orasıdır.
İstemci kütüphanesi fikir dayatan işaretleme gönderiyorsa, o zamanı onu geçersiz kılarak harcarsınız. Hiçbir şey göndermiyorsa, o zamanı onu inşa ederek harcarsınız — ama en azından savaşmak yerine inşa ediyorsunuzdur.
corpusctl bilinçli olarak ikinci konumu alır. Blok render'ıcıları sıfır varsayılan stil ile gelir — tek satır CSS bile yok. Her blok tipi geçersiz kılınabilir. Bilinmeyen bir blok tipi, hata fırlatmak yerine zarifçe atlanır, böylece ön uçtan öne geçen bir içerik modeli sayfayı kırmak yerine kademeli olarak bozulur (degrade).
Çekirdek render ağacı çerçeve-bağımsızdır; React, Vue ve Next.js adaptörleri onun üstündeki ince katmanlardır. Arkasındaki kural: bir blok tipini render etmek çerçeveye özel kod gerektiriyorsa, soyutlama yanlış yerdedir.
Önceden derlenmiş içerikle bile, genellikle ön ucun bir şeyin değiştiğini bilmesini istersiniz — bir listeyi yenilemek, bir rotayı ısıtmak veya alt taraftaki bir önbelleği patlatmak için.
corpusctl yayınlama, yayından kaldırma, güncelleme ve silme olaylarında webhook'ları tetikler. Teslimatlar üstel geri çekilme (backoff) ve titreşim (jitter) ile dayanıklı bir kuyrukta bekler, böylece bir saatlik alıcı kesintisi olayları kaybetmez. Yükler zaman damgasıyla HMAC imzalıdır ve uç nokta URL'si çağrılmadan önce SSRF'ye karşı kontrol edilir — dahili ağ adresleri kayıt sırasında reddedilir.
Payload — tek bir Next.js ürünü, kod-olarak-yapılandırma, rahat self-hosting. Figma satın alımının ardından Cloud'un yeni proje kabul etmediğini unutmayın.
Strapi — açık ara en büyük topluluk (~2.800 Stack Overflow sorusu), ücretsiz self-hosted. Strapi Cloud proje başına ücretlendirir.
Sanity — kategorideki en iyi düzenleme deneyimi, GROQ ve koltuk başına fiyatlandırma.
corpusctl — sayaçsız, önceden derlenmiş değişmez okumalar, tek panelden birden fazla proje, sıfır-stil render'ıcıları. Daha küçük topluluk; pazar yeri yok; kenar önbelleği tek bölgeli.
İçerik yalnızca istemcide render ediliyor. Sunucu render'ı için Next.js'i seçtiniz ve sonra useEffect içinde çektiniz. Arama motorları boş bir kabuk görür.
Önizleme geçişten sonra bağlandı. Editörler ilk gün kendi taslaklarını göremediklerini keşfeder. Önce onu bağlayın.
Önbellekleme kararı verilmedi. Her sayfa görüntülemesi CMS'e vurur ve fatura ya da gecikme ikinci ayda ortaya çıkar.
Bir headless CMS'te 'açık kaynak' aslında ne kadara mal olur
Açık kaynak nadiren çalıştırması ücretsiz demektir. Lisanslar, bulut üst satışları ve altı popüler headless CMS'in doğrulanmış maliyeti — kendi sayfalarından alınan sayılarla.