API Yanıtlarını Önbelleğe Alma + Web Sayfası Önbelleğe Alma

Web sitelerinde geri tuşuna bastığınızda, daha önce yüklenmiş sayfaların tekrar yüklenmesiyle sık karşılaşmışsınızdır.

Örneğin, bir alışveriş sitesinde, arama sonuçlarında çıkan bir ürüne tıkladıktan sonra geri tuşuna bastığınızda

sayfanın yeniden aranması söz konusudur.

Zaten yüklenmiş bir sayfanın tekrar yüklenmesi gerekmesi, kullanıcı deneyimi açısından iyi olmamakla birlikte, sistemsel olarak daha büyük bir sorundur.

Sayfanın yeniden yüklenmesiyle gereksiz API çağrıları yapılır ve trafik artar.

Maliyet sorunları da ortaya çıkabilir ve söz konusu sayfada veri toplanıyorsa, belirli verilerin aşırı toplanması sorunu da mevcuttur.

Bunu çözmek için sayfa veya API sonuçlarını önbelleğe almak büyük fayda sağlayacaktır.

1. Tarayıcı Depolama Alanını Kullanma (localStorage, SessionStorage, IndexedDB)

- localStorage, tarayıcı kapatılsa bile verileri korur.

- sessionStorage, tarayıcı veya sekme kapatıldığında verileri siler.

- IndexedDB, büyük verileri saklamak için kullanılır. Asenkron olarak kaydedilebilir ve NoSql'dir. Görüntü ve videoları da kaydedebilir. Maksimum kapasite tarayıcıya göre değişir, ancak yaklaşık 50 MB civarındadır. Çevrimdışı olarak da kullanılabilir.

2. Axios Interceptor

Axios kullanıyorsanız, yerleşik özellik olarak ara kesicileri kullanabilirsiniz. Aynı istek için, sunucuya göndermeden yanıt döndürür.

Nuxt Çerçevesi İçinde Önbelleğe Alma

Bir bileşeni keep-alive etiketiyle sardığınızda, bileşeni önbelleğe alabilirsiniz.

Sunucu tarafı oluşturma sırasında fetch() çağrılıp çağrılmayacağını ayarlayabilirsiniz. False ise, fetch yalnızca istemci tarafında çağrılır.

Vuex kullanmanın da bir yolu var. Prensip tarayıcı depolamasıyla aynıdır.

Yanıt başlıklarına önbellek ayarları eklemek için web sunucusunu (Nginx) kullanabilirsiniz.

Ancak, önbellek nedeniyle görüntü gibi kaynakların dağıtımı anında uygulanmayabilir; bu durumda önbelleği geçersiz kılmanız gerekir. Dosya adını değiştirmeniz, önbelleği geçersiz kılan bir istek göndermeniz veya AWS CloudFront kullanıyorsanız önbellek geçersiz kılma işlemini uygulamanız gerekir.

Nuxt sunucusunda oluşturulmuş sayfaların kendisini bellek önbelleğine kaydetmenin bir yolu da vardır.

Sunucu tarafı önbelleklemedir ve yalnızca API değil, tüm sayfa önbelleğe alınır. Yani geri tuşuna bastığınızda gecikme olmadan hemen yüklenir. Performansı çok yüksektir, ancak sunucu belleğini kullandığı için dikkatli olunmalıdır.

Eğer 10.000 kullanıcı aynı sayfayı talep ederse,

İlk kullanıcı talep ettiğinde sayfa oluşturulur ve önbelleğe alınır.

Daha sonra 9.999 kullanıcı aynı sayfaya erişirse, sunucu önbelleğe alınmış sonucu yanıtlar.

-> Kullanıcıya özel veriler gösterilmesi gerekiyorsa bu yöntem uygun değildir.

+ cache, dahili olarak lru-cache paketini kullanır.

* lru: En uzun süre kullanılmayan verileri öncelikli olarak kaldıran bir önbellekleme algoritmasıdır.

Hashmap veya çift bağlı liste veri yapılarını kullanarak anahtar-değerleri hızlı bir şekilde bulur: O(1) zaman karmaşıklığı