Web sayfası ve API yanıt önbelleğe alarak gereksiz veri yeniden isteklerinden kaynaklanan sistem yükü ve UX düşüşü sorunlarını çözebilirsiniz.
Tarayıcı depolama alanı, Axios Interceptor, Nuxt keep-alive, Vuex, web sunucusu önbelleğe alma gibi çeşitli önbelleğe alma tekniklerini kullanabilirsiniz; sunucu tarafı oluşturma sayfa önbelleğe alma performans artışında etkilidir ancak bellek kullanımına dikkat edilmelidir.
Önbelleği geçersiz kılarak görüntü gibi kaynakların dağıtımı anında uygulanabilir hale getirilir.
Web sitesinde geri düğmesine bastığınızda, daha önce yüklenmiş sayfaların tekrar yüklenmesi deneyimini sıklıkla yaşamışsınızdır.
Örneğin, bir alışveriş sitesinde, arama sonuçlarında listelenen bir ürüne tıkladıktan sonra geri düğmesine bastığınızda
yeniden arama yapılması söz konusudur.
Zaten yüklenmiş sayfaların tekrar yüklenmesi gerekmesi, kullanıcı deneyimi açısından olumsuz olmakla kalmaz, sistematik olarak daha büyük sorunlara da yol açar.
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 yaşanabilir.
Bunu çözmek için sayfa veya API sonuçlarını önbelleğe almak büyük faydalar sağlayabilir.
- localStorage, tarayıcı kapatılsa bile verileri korur.
- sessionStorage, tarayıcı veya sekme kapatıldığında verileri siler.
- IndexedDB, büyük verileri depolamak için kullanılır. Eşzamansız olarak depolama yapabilir ve NoSql veritabanıdır. Görüntü ve videoları da depolayabilir. 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 interceptor'ları kullanabilirsiniz. Aynı istek için, sunucuya göndermeden yanıt döndürülür.
Nuxt Çerçevesi İçinde Önbelleğe Alma
Bir bileşeni keep-alive etiketiyle sarmalarsanız, 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'i kullanmanın da bir yolu vardır. Prensip tarayıcı depolamasıyla aynıdır.
Web sunucusu (Nginx) kullanılarak, yanıt üstbilgilerine önbellek ayarları eklenebilir.
Ancak, önbellek nedeniyle görüntü gibi kaynakların dağıtımı anında yansımayabilir; bu durumda önbelleğin geçersiz kılınması gerekir. Dosya adını değiştirmek, önbelleği geçersiz kılan bir istek göndermek veya AWS CloudFront kullanıyorsanız önbellek geçersiz kılma işlemini uygulamak mümkündür.
Nuxt sunucusunda oluşturulan sayfaların kendisini bellek önbelleğinde depolamanın bir yolu da vardır.
Sunucu tarafı önbelleklemedir ve yalnızca API'ler değil, tüm sayfa önbelleğe alınır. Yani, geri düğmesine bastığınızda gecikme olmadan 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ı isterse,
İlk kullanıcı istek yaptığında sayfa oluşturulur ve önbelleğe alınır.
Ardından, aynı sayfaya erişen 9.999 kullanıcı için sunucu önbelleğe alınmış sonucu yanıtlar.
-> Kullanıcıya özel verilerin gösterilmesi gerekiyorsa, bu yöntem uygun değildir.