Inertia.js ve Cloudflare Önbellek Hatası: Web Sitenizi Nasıl Etkiler?

Bir Laravel projesinde Inertia.js ile çalışırken, beklenmedik bir sorunla karşılaşabilirsiniz: Cloudflare önbelleği, XHR isteklerine yanıt olarak JSON yerine HTML sunabilir. Bu durum, geliştiricilerin dikkat etmesi gereken kritik bir önbellek yönetimi hatasıdır.

Inertia.js ve Cloudflare Entegrasyonunda Karşılaşılan Sorun

Projenizde Inertia.js kullanıyorsunuz ve sayfalarınız hem HTML hem de JSON formatında aynı URL üzerinden hizmet veriyor. Cloudflare’ın kenar önbelleği (edge cache) devreye alındığında, sistem HTTP yanıtındaki s-maxage önbellek süresini dikkate alarak sayfaları önbelleğe alabilir. Ancak burada kritik bir sorun ortaya çıkıyor: Cloudflare, Vary: X-Inertia başlığını görmezden gelebilir ve JSON bekleyen bir XHR isteğine HTML yanıtı döndürebilir.

Bu hatanın en tehlikeli yanı, hata ayıklama modunda bile ortaya çıkabilmesidir. Örneğin, bir sayfanın logo düğmesine tıkladığınızda, Inertia’nın hata modunda sayfa HTML olarak render edilebilir — üretim ortamında ve 200 HTTP durum koduyla bile. Bu durum, kullanıcı deneyimini ciddi şekilde bozabilir ve geliştiriciler için kafa karıştırıcı olabilir.

Hatanın Arkasındaki Teknik Detaylar

Bu sorunun temelinde, Cloudflare’ın önbellek yönetimiyle ilgili bir tasarım farklılığı yatıyor. Sistem, önbelleğe alma sırasında yanıtı değerlendirirken Vary başlıklarını dikkate almaz ve yalnızca URL’ye odaklanır. Sonuç olarak, aynı URL üzerinden yapılan farklı içerik talepleri (HTML ve JSON) arasında ayrım yapamaz.

Geliştiriciler genellikle JSON yanıtlarına Cache-Control: no-store ekleyerek bu sorunu önlemeye çalışır. Ancak bu çözüm, yanıtın önbelleğe alınmasını engellemek yerine yalnızca istemci tarafında saklanmasını engeller. Cloudflare’ın kenar önbelleği, yanıtı zaten depolamış olabilir ve bu durumda no-store etkisiz kalır.

Basit ve Etkili Bir Çözüm Yöntemi

Sorunu çözmek için birkaç adım izleyebilirsiniz. İlk olarak, Vary: X-Inertia başlığını yanıtlarınıza ekleyin ve Cloudflare’ın bu başlığı dikkate almasını sağlayın. Ancak bu yöntem, Cloudflare’ın varsayılan davranışını değiştirmez. Daha güvenilir bir çözüm, Cloudflare Cache Kurallarını kullanarak önbelleğe alma davranışını özelleştirmektir.

Projenizin Cloudflare hesabında aşağıdaki adımları izleyin:

• Cloudflare Dashboard’a giriş yapın ve ilgili projenizi seçin.
• "Rules" bölümüne gidin ve "Cache Rules" sekmesine tıklayın.
• Yeni bir kural oluşturun ve aşağıdaki koşulları belirleyin:
• Alan adı: Projenizin alan adı
• Önbelleğe alma süresi: s-maxage değerini kullanmayın veya sıfırlayın
• Yanıt başlıklarını dikkate alın: Vary: X-Inertia başlığını ekleyin
• Kuralı kaydedin ve dağıtımını bekleyin.

Bu değişiklikler sayesinde, Cloudflare artık Inertia.js isteklerini doğru şekilde önbelleğe alacak ve JSON yanıtlarını HTML olarak sunma riskini ortadan kaldıracaktır.

Test Ederek Sorunu Doğrulama

Sorunun projenizde olup olmadığını hızlıca test etmek için aşağıdaki komutu kullanabilirsiniz:

curl -I -H "X-Inertia: true" 

Komutun çıktısında cf-cache-status: HIT yanıtı görüyorsanız, Cloudflare önbelleğinin aynı URL üzerinden farklı içerikler sunduğu anlamına gelir. Bu durumda yukarıdaki çözümleri uygulamak önemlidir.

Gelecek için Öneriler

Inertia.js ve modern önbellek sistemlerinin entegrasyonunda karşılaşılan bu tür sorunlar, projelerinizin kararlılığını doğrudan etkileyebilir. Cloudflare gibi önbellek hizmetleriyle çalışırken, yanıt başlıklarının ve önbellek kurallarının doğru şekilde yapılandırıldığından emin olun. Ayrıca, farklı içerik formatlarının aynı URL üzerinden hizmet verdiği durumlarda, önbellek yönetimini dikkatlice inceleyin.

Bu basit adımları izleyerek, kullanıcı deneyimini iyileştirebilir ve geliştirici olarak karşılaşabileceğiniz kafa karıştırıcı sorunları önleyebilirsiniz.