HI
RU
EN
ES
ZH
FR
DE
PT
AR
आपका एप्लिकेशन धीमा क्यों है (और इसे कैसे ठीक करें)
\n\nक्या आपने कभी क्लिक करने के बाद इंटरफ़ेस के रीड्रा होने का इंतज़ार किया है? या देखा है कि सर्वर एक ही अनुरोध को लगातार कई बार संसाधित कर रहा है? परिचित लगता है? तो यह लेख आपके लिए है। डेटा कैशिंग सिर्फ एक "अच्छी प्रथा" नहीं है, बल्कि किसी भी TypeScript डेवलपर का मूलभूत कौशल है जो चाहता है कि उसका एप्लिकेशन रेंगने के बजाय उड़े।
\n\nआज हम जानेंगे कि TypeScript में डेटा को सही तरीके से कैसे कैश करें: फ्रंटएंड पर सरल in-memory कैश से लेकर बैकएंड पर TTL और Redis के साथ उन्नत रणनीतियों तक। आपको तैयार कोड स्निपेट मिलेंगे जिन्हें आप आज ही अपने प्रोजेक्ट में उपयोग कर सकते हैं।
\n\nकैशिंग क्या है और TypeScript में इसकी आवश्यकता क्यों है?
\n\nकैशिंग बार-बार उपयोग किए जाने वाले डेटा को तेज़ स्टोरेज में अस्थायी रूप से संग्रहीत करने की तकनीक है। हर बार डेटा के लिए डेटाबेस या रिमोट सर्वर पर जाने के बजाय, हम पहले अनुरोध के परिणाम को सहेजते हैं और बाद के अनुरोधों पर इसे प्रदान करते हैं।
\n\nलाभ स्पष्ट हैं:
\n- \n
- प्रतिक्रिया समय (latency) में कमी - उपयोगकर्ता को मिलीसेकंड में डेटा मिलता है \n
- सर्वर और डेटाबेस पर लोड कम होना \n
- ट्रैफ़िक और संसाधनों की बचत \n
- ऑफ़लाइन काम करने की क्षमता (फ्रंटएंड के लिए) \n
TypeScript में, टाइप सिस्टम के कारण, हम सुरक्षित और पूर्वानुमानित कैशिंग लिख सकते हैं जो रनटाइम पर नहीं टूटेगी। आइए देखें कि यह कैसे करना है।
\n\nकैशिंग रणनीतियाँ: सही दृष्टिकोण चुनना
\n\nकोड लिखने से पहले, यह समझना ज़रूरी है कि आप कौन सी रणनीति उपयोग करेंगे। इस पर निर्भर करता है कि आपका समाधान कितना प्रभावी होगा।
\n\n1. In-Memory Cache (मेमोरी में कैश)
\nसबसे सरल और तेज़ विकल्प। डेटा एक वेरिएबल, Map या ऑब्जेक्ट में संग्रहीत होता है। फ्रंटएंड और छोटे Node.js एप्लिकेशन के लिए आदर्श।
\nनुकसान: पेज रीलोड या सर्वर रीस्टार्ट करने पर डेटा खो जाता है।
\n\n2. LocalStorage / SessionStorage (ब्राउज़र में कैश)
\nफ्रंटएंड के लिए उपयुक्त जब सत्रों के बीच डेटा सहेजना हो। उपयोगकर्ता सेटिंग्स, टोकन और API प्रतिक्रियाओं को कैश करने के लिए आदर्श।
\nनुकसान: सिंक्रोनस एक्सेस, आकार सीमा (5-10MB)।
\n\n3. Redis (सर्वर पर कैश)
\nबैकएंड के लिए औद्योगिक मानक। तेज़, विश्वसनीय, TTL और जटिल डेटा संरचनाओं के समर्थन के साथ। ioredis लाइब्रेरी के माध्यम से Node.js के साथ बढ़िया काम करता है।
\nनुकसान: एक अलग सेवा (Redis सर्वर) की आवश्यकता होती है।
\n\n4. Service Worker + Cache API (PWA)
\nप्रोग्रेसिव वेब ऐप्स के लिए उन्नत कैश। नेटवर्क अनुरोधों को इंटरसेप्ट करने और कैश की गई प्रतिक्रियाएँ प्रदान करने की अनुमति देता है। ऑफ़लाइन मोड के लिए आदर्श।
\n\nTypeScript में कैश लिखना: सरल से जटिल तक
\n\nअब अभ्यास की ओर बढ़ते हैं। मैं TypeScript जेनेरिक का उपयोग करते हुए बुनियादी से लेकर उन्नत तक कई कार्यान्वयन दिखाऊंगा।
\n\nTTL के साथ सरल In-Memory Cache
\n\nचलिए क्लासिक से शुरू करते हैं - मेमोरी में कैश जिसमें पुरानी प्रविष्टियाँ स्वचालित रूप से हटा दी जाती हैं।
\n\n// cache.ts\ninterface CacheEntry<T> {\n data: T;\n expiry: number; // मिलीसेकंड में टाइमस्टैम्प\n}\n\nclass SimpleCache<T> {\n private store = new Map<string, CacheEntry<T>>();\n\n constructor(private defaultTTL: number = 60000) {} // डिफ़ॉल्ट रूप से 60 सेकंड\n\n set(key: string, data: T, ttl?: number): void {\n const expiry = Date.now() + (ttl ?? this.defaultTTL);\n this.store.set(key, { data, expiry });\n }\n\n get(key: string): T | undefined {\n const entry = this.store.get(key);\n if (!entry) return undefined;\n if (Date.now() > entry.expiry) {\n this.store.delete(key);\n return undefined; // समय समाप्त\n }\n return entry.data;\n }\n\n has(key: string): boolean {\n return this.get(key) !== undefined;\n }\n\n clear(): void { 
