Axios İpuçları #3: LRU Cache ile HTTP Yanıtlarını Önbelleklemek

Axios serisindeki bir önceki yazı: Axios İpuçları #2: Interceptor Kullanarak HTTP İstek ve Yanıtlarını Yönetmek

Motivasyon

Web veya mobil gibi platform fark etmeksizin geliştirdiğimiz uygulamalardaki API uçlarına yaptığımız isteklerin yanıtlarını farklı saiklerle önbellekleme yoluna gidebiliyoruz.

Uygulama içerisinden sunuculara yapılan istek sayısını ve dolayısıyla sunucularda oluşacak yükü azaltmak ve sık güncellenmeyen servislerin öngörülebilir yanıtlarını zaman kaybetmeden almak, önbellekleme yöntemlerinin tercih edilmesindeki en büyük iki neden olarak karşımıza çıkıyor.

Önbellekleme operasyonları ister sunucu, ister istemci, ister de aynı anda hem sunucu hem istemci tarafında yapılabiliyor. Bu yazıda, istemci tarafında, özellikle SPA (single page application) ve mobil uygulamalarda sıklıkla kullanılan LRU cache yönteminin Axios istemcisiyle nasıl kullanılacağından kısaca bahsedeceğim.

LRU (Least Recently Used) Cache

LRU cache, bir önbellekleme algoritması. LRU’da kaynaklardan elde edilen veriler, erişim durumlarına göre eskiden yeniye doğru sıralanıyorlar. Veriler için bellekte/diskte ayrılan alan dolmaya başladığında ise en uzak tarihte erişilenden başlanmak suretiyle siliniyorlar. Bu sayede hep belirli sayıda ve güncele en yakın veri önbellekte saklanmış ve talep durumunda sunulmuş oluyor.

Bu yöntemi Axios ile uygulamalarımızda nasıl kullanacağımıza bakmak için axios, axios-extensions ve lru-cache NPM paketlerini kuralım.

NPM bağımlılıklarının kurulması

Instance ve baseURL Tanımlamak

İlk olarak bir Axios instance’ı yaratıyoruz. Önceki Axios yazısında instance yaratmaktan bahsetmiştim. O yüzden burada uzun uzadıya tekrar etmeyeceğim fakat API kaynağımızla ilgili genel yapılandırmaları barındırdığını bilmek şu aşamada yeterli.

Instance’ı oluştururken bir baseURL tanımladık. Bu sayede her HTTP isteğinin başında http://foo.bar olan API kaynağımızı yazmak zorunda kalmadık. Bundan sonrası için sadece istek yapacağımız API ucunu bilmemiz yeterli olacak.

Cache Adaptörünü Bağlamak

Axios, kullandığı adaptörler vasıtasıyla HTTP isteklerini işleyebiliyor. Bir nevi bu adaptörler sayesinde Axios’a HTTP isteklerini manipüle edebileceği ek özellikler kazandırmış oluyoruz.

Axios instance’ı için önbellek yapılandırması

Üstteki örnekte adapter olarak axios-extensions‘ın sağladığı, HTTP isteklerini önbelleklemek için kullanılan cacheAdapterEnhanceradaptörünü varsayılan önbellekleme yöntemi olarak seçtiğimiz LRUCache ile Axios’a bağladık. maxAge olarak da yirmi dört saatin milisaniye cinsinden karşılığını verdik.

Export ettiğimiz instanceAPI (Kabul ediyorum, kötü bir isimlendirme.) üzerinden yapacağımız isteklerin yanıtları yirmi dört saat boyunca önbellek üzerinden verilecek. API uçlarına ve dolayısıyla sunuculara herhangi bir istek ulaşmayacak. Yirmi dört saat dolduğunda ise elle hiçbir müdaheleye gerek kalmadan istek doğrudan API’a yapılacak ve alınan yanıt yine bir yirmi dört saat daha sunulmak üzere önbelleklenecek.

Örnek kullanım senaryosu ideal gibi gözükse de gerçek hayatta bir API’daki tüm uçları önbelleklemeye ihtiyaç olmayacak, ihtiyaç olsa dahi kimi kısıtlardan ötürü bunu yapmak mümkün olmayacaktır. O nedenle bir istisna tanımı yapmak gerekiyor. cacheAdapterEnhancer‘ın sağladığı enabledByDefault ve cacheFlag seçenekleri, önbelleklemeyi varsayılan olarak kapatıp sadece istenilen API uçlarında yapabilmeyi sağlıyor.

Önbellek kullanımı için istisna eklenmesi

Bu sayede sadece parametre olarak useCache almamış HTTP istekleri önbelleklemeye tabi tutulmadan her defasında doğrudan API’a istek yapacak.

HTTP isteğinde önbellekleme tercihini belirtmek

Sonuç

LRU önbelleklemeyi canlı ortamdaki projelerde kullanıyorum ve sonuçlarından oldukça memnunum. Fakat en iyi verimi alabilmek için API uçlarının ihtiyaçlarını etraflıca analiz etmek gerekiyor.

  • Hangi API ucu ne kadar süreyle önbelleklenebilir?
  • Daha kısa veya uzun süre önbelleklenmesi hangi avantajları ve dezavantajları beraberinde getirebilir?
  • Önbelleklenmemesinin maliyeti nedir?

Bu sorulara net bir şekilde yanıt vermeden canlı ortamda önbellekleme operasyonlarına girilmemesini tavsiye ederim.

Kaynaklar

Axios serisindeki bir sonraki yazı: Axios İpuçları #4: localForage ile HTTP Yanıtlarını IndexedDB’de Önbelleklemek

--

--

Front-End Developer @Akbank — tugsanunlu.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store