Next.js एक बहुत सफल वेब फ्रेमवर्क है जो सर्वर-साइड रेंडरिंग और स्टैटिक साइट जनरेशन को एक साथ लाता है। SSG CDN कैशिंग की बदौलत आपकी वेबसाइट को गति देता है जबकि SSR SEO और डायनामिक डेटा के साथ आपकी मदद करता है।
सर्वर-साइड रेंडरिंग एक बेहतरीन फीचर है जो आपको फुल-स्टैक एप्लिकेशन लिखने में मदद करता है। लेकिन यदि आप सावधान नहीं हैं, तो आपके Next.js वेबसाइट का प्रदर्शन आसानी से प्रभावित हो सकता है। इस ब्लॉग पोस्ट में, मैं समझाऊंगा कि Next.js API कॉल को तेज करने के लिए Redis का लाभ कैसे उठाया जाए। उससे पहले मैं प्रदर्शन में सुधार का एक सरल तरीका संक्षेप में बताऊंगा।
अपने API कॉल्स पर SWR का उपयोग करें
SWR एक बहुत स्मार्ट डेटा फेचिंग लाइब्रेरी है। यह HTTP RFC 5861 द्वारा वर्णित HTTP कैश अमान्यकरण रणनीति (stale-while-revalidate) का उपयोग करता है। जब आप SWR के साथ API कॉल करते हैं, तो यह तुरंत कैश्ड डेटा लौटाता है लेकिन एसिंक्रोनस रूप से वर्तमान डेटा लाता है और आपके UI को अपडेट करता है। आप अपनी स्टेलनेस सहनशीलता के आधार पर refreshInterval भी सेट कर सकते हैं।
const { data: user } = useSWR('/api/user', { refreshInterval: 2000 })उपरोक्त कोड में, यूजर API हर 2 सेकंड में रीफ्रेश होगा।
Redis के साथ कैशिंग
SWR बहुत सरल और प्रभावी है। लेकिन ऐसे मामले हैं जहां आपको सर्वर-साइड कैशिंग की आवश्यकता होगी:
- क्लाइंट-साइड कैशिंग क्लाइंट्स के लिए प्रदर्शन में सुधार करता है। लेकिन यदि क्लाइंट्स की संख्या अधिक है, तो आप सर्वर-साइड संसाधनों पर उच्च लोड का अनुभव कर सकते हैं जो अंततः क्लाइंट-साइड प्रदर्शन को भी प्रभावित करेगा।
- यदि आप कोटा के साथ एक बाहरी API का उपभोग कर रहे हैं, तो आप सर्वर-साइड पर API उपयोग को नियंत्रित करना चाहेंगे। अन्यथा, बहुत सारे क्लाइंट्स API को जल्दी से उपभोग कर लेंगे।
- यदि आपके पास सर्वर-साइड पर डायनामिक इनपुट्स का उपयोग करके गणना, फेच या प्रोसेस किए गए संसाधन हैं, तो क्लाइंट-साइड कैशिंग बहुत उपयोगी नहीं होगा।
उदाहरण प्रोजेक्ट: कोविड ट्रैकर
इस प्रोजेक्ट में, हम Javier Aviles के कोविड API का उपयोग करेंगे और आज के मामलों की संख्या के साथ शीर्ष 10 देशों को खोजेंगे। वेबसाइट देखें और सोर्स कोड देखें।
हम Covid API से प्रतिक्रियाओं को कैश करने के लिए Redis का उपयोग करेंगे ताकि:
- प्रतिक्रिया बहुत तेज़ होगी। यदि आप वेबसाइट देखें, तो आप देखेंगे कि Covid API को कॉल करने में सैकड़ों मिलीसेकंड लगते हैं जबकि Redis से फेच करने में 1-2 मिलीसेकंड लगते हैं।
- हम Covid API को बहुत सारे अनुरोधों से अभिभूत नहीं करेंगे।
API कोड
कोड पहले जांचता है कि क्या हमारे पास Redis में API परिणाम कैश्ड है। यदि नहीं, तो हम Covid API से सभी देशों की सूची प्राप्त करेंगे और उन्हें वर्तमान दिन के मामलों की संख्या के अनुसार सॉर्ट करेंगे और शीर्ष 10 को Redis में सहेजेंगे। Redis में सहेजते समय, हम "EX" 60 पैरामीटर सेट करते हैं जिसका अर्थ है कि Redis 60 सेकंड में एंट्री को हटा देगा।
import Redis from "ioredis";
let redis = new Redis(process.env.REDIS_URL);
export default async (req, res) => {
let start = Date.now();
let cache = await redis.get("cache");
cache = JSON.parse(cache);
let result = {};
if (cache) {
console.log("loading from cache");
result.data = cache;
result.type = "redis";
result.latency = Date.now() - start;
return res.status(200).json(result);
} else {
console.log("loading from api");
start = Date.now();
return fetch("https://coronavirus-19-api.herokuapp.com/countries")
.then((r) => r.json())
.then((data) => {
data.sort(function (a, b) {
return b.todayCases - a.todayCases;
});
result.data = data.splice(1, 11);
result.type = "api";
result.latency = Date.now() - start;
redis.set("cache", JSON.stringify(result.data), "EX", 60);
return res.status(200).json(result);
});
}
};UI कोड
UI एक सरल React कोड है। हम SWR का उपयोग करके API से डेटा फेच करते हैं।
export default function Home() {
function refresh(e) {
e.preventDefault();
window.location.reload();
}
const { data, error } = useSWR("api/data", fetcher);
if (error) return "An error has occurred.";
if (!data) return "Loading...";
return (
Covid Tracker
Covid Tracker
Top 10 countries with the most cases today
Country
Today Cases
Today Deaths
{data.data.map((item) => (
{item.country}
{item.todayCases}
{item.todayDeaths}
))}
Loaded from {data.type} in {data.latency} milliseconds.
Click to reload.
);
}
