API प्रतिक्रियाओं को कैश करने का तरीका + वेब पेज कैशिंग

आपने वेबसाइट पर बैक बटन दबाने पर पहले से लोड किए गए पेज को फिर से लोड करने का अनुभव कई बार किया होगा।

उदाहरण के लिए, किसी ऑनलाइन शॉपिंग वेबसाइट पर सर्च रिजल्ट में दिख रहे किसी प्रोडक्ट पर क्लिक करने के बाद, अगर आप बैक बटन दबाते हैं,

तो वह पेज फिर से सर्च होता है।

पहले से लोड किए गए पेज को फिर से लोड करना UX के लिए अच्छा नहीं है, लेकिन सिस्टम के लिहाज से यह और भी बड़ी समस्या है।

पेज को दोबारा लोड करने से अनावश्यक API कॉल होते हैं और ट्रैफ़िक बढ़ता है।

इससे लागत में भी वृद्धि हो सकती है, और अगर उस पेज पर डेटा एकत्र किया जा रहा है, तो कुछ डेटा का अत्यधिक संग्रहण भी हो सकता है।

इस समस्या का समाधान करने के लिए, पेज या API रिजल्ट को कैश करना बहुत कारगर साबित हो सकता है।

1. ब्राउज़र स्टोरेज का उपयोग करना (localStorage, SessionStorage, IndexedDB)

- localStorage में डेटा ब्राउज़र बंद करने के बाद भी बना रहता है।

- sessionStorage में डेटा ब्राउज़र या टैब बंद होने पर डिलीट हो जाता है।

- IndexedDB बड़े डेटा को स्टोर करने के लिए उपयोग किया जाता है। इसे असीमित रूप से स्टोर किया जा सकता है और यह NoSql है। इसमें इमेज और वीडियो भी स्टोर किए जा सकते हैं। अधिकतम क्षमता अलग-अलग ब्राउज़रों में अलग-अलग होती है, लेकिन लगभग 50MB के आसपास होती है। इसे ऑफ़लाइन भी इस्तेमाल किया जा सकता है।

2. Axios Interceptor

अगर आप axios का उपयोग करते हैं, तो आप इसके अंतर्निहित इंटरसेप्टर फीचर का उपयोग कर सकते हैं। यह एक ही रिक्वेस्ट के लिए सर्वर को बिना भेजे हुए रिस्पांस को वापस कर देता है।

Nuxt फ्रेमवर्क में कैशिंग

किसी भी कंपोनेंट को keep-alive टैग से घेरकर उसे कैश किया जा सकता है।

यह सेट करता है कि सर्वर साइड रेंडरिंग के दौरान fetch() को कॉल करना है या नहीं। अगर यह false है, तो fetch केवल क्लाइंट साइड पर ही कॉल किया जाएगा।

Vuex का उपयोग करने का तरीका भी है। इसका सिद्धांत ब्राउज़र स्टोरेज के समान है।

वेब सर्वर (Nginx) का उपयोग करके रिस्पांस हेडर में कैश सेटिंग्स को शामिल किया जा सकता है।

लेकिन, कैश के कारण इमेज जैसी रिर्सोर्स को तुरंत अपडेट नहीं किया जा सकता है, इसलिए ऐसे मामलों में कैश को रीसेट करना होगा। आप फ़ाइल का नाम बदल सकते हैं, कैश को रीसेट करने के लिए एक रिक्वेस्ट भेज सकते हैं, या अगर आप AWS CloudFront का उपयोग कर रहे हैं, तो आप कैश को रीसेट कर सकते हैं।

Nuxt सर्वर पर रेंडर किए गए पेज को मेमोरी कैश में स्टोर करने का तरीका भी है।

यह सर्वर-साइड कैशिंग है, और इसमें केवल API ही नहीं बल्कि पूरा पेज भी कैश किया जाता है। इसका मतलब है कि बैक बटन दबाने पर पेज बिना किसी देरी के लोड हो जाएगा। यह बहुत ही अच्छा परफॉर्मेंस देता है, लेकिन यह सर्वर मेमोरी का उपयोग करता है, इसलिए सावधानी बरतने की जरूरत है।

यदि 10,000 उपयोगकर्ता एक ही पेज का अनुरोध करते हैं,

पहले उपयोगकर्ता के अनुरोध पर, पेज रेंडर किया जाता है और कैश किया जाता है।

इसके बाद, जब 9,999 उपयोगकर्ता उसी पेज तक पहुँचते हैं, तो सर्वर कैश किए गए परिणामों का जवाब देता है।

-> अगर उपयोगकर्ता के आधार पर अलग-अलग डेटा दिखाना है, तो यह तरीका अच्छा नहीं है।

+ cache आंतरिक रूप से lru-cache पैकेज का उपयोग करता है।

* lru: सबसे लंबे समय तक उपयोग नहीं किए गए डेटा को प्राथमिकता से हटाने वाला एक कैशिंग एल्गोरिथम है।

यह हैशमैप या डबल लिंक्ड लिस्ट डेटा संरचना का उपयोग करके कुंजी-मूल्य को जल्दी से ढूंढता है: O(1) समय जटिलता