Redis के साथ अपने Next.js एप्लिकेशन को गति दें

Next.js एक बहुत ही सफल वेब ढांचा है जो सर्वर साइड रेंडरिंग और स्थिर साइट निर्माण को एक साथ लाता है। SSG आपकी वेब साइट को गति देता है CDN कैशिंग के लिए धन्यवाद इस बीच SSR आपको SEO और गतिशील डेटा के साथ मदद करता है।

सर्वर साइड रेंडरिंग एक बेहतरीन फीचर है जो आपको फुल स्टैक एप्लिकेशन लिखने में मदद करता है। लेकिन अगर आप सावधान नहीं हैं, तो आपकी Next.js वेबसाइट का प्रदर्शन आसानी से प्रभावित हो सकता है। इस ब्लॉग पोस्ट में, मैं समझाऊंगा कि अपने Next.js API कॉल को गति देने के लिए Redis का लाभ कैसे उठाया जाए। इससे पहले मैं संक्षेप में आपके प्रदर्शन को बेहतर बनाने का एक आसान तरीका बताऊंगा।

अपने API कॉल पर SWR का उपयोग करें

SWR एक बहुत ही स्मार्ट डेटा लाने वाली लाइब्रेरी है। यह HTTP RFC 5861 द्वारा वर्णित HTTP कैश अमान्यकरण रणनीति (बासी-जबकि-पुनरीक्षित) का उपयोग करता है। जब आप SWR के साथ API को कॉल करते हैं, तो यह तुरंत कैश्ड डेटा लौटाता है लेकिन अतुल्यकालिक रूप से यह वर्तमान डेटा प्राप्त करता है और आपके UI को अपडेट करता है। गतिहीनता के प्रति आपकी सहनशीलता के आधार पर आप रिफ्रेशइंटरवल भी सेट कर सकते हैं।

const { data: user } = useSWR('/api/user', { refreshInterval: 2000 })

उपरोक्त कोड में, उपयोगकर्ता API हर 2 सेकंड में ताज़ा किया जाएगा।

Redis के साथ कैशिंग

SWR बहुत ही सरल और प्रभावी है। लेकिन कुछ मामलों में आपको सर्वर साइड कैशिंग की आवश्यकता होगी:

क्लाइंट साइड कैशिंग क्लाइंट के प्रदर्शन में सुधार करता है। लेकिन यदि ग्राहकों की संख्या अधिक है, तो आप सर्वर साइड संसाधनों पर उच्च भार का अनुभव कर सकते हैं जो अंततः क्लाइंट साइड प्रदर्शन को भी प्रभावित करेगा।
यदि आप कोटा के साथ बाहरी एपीआई का उपभोग कर रहे हैं, तो आप सर्वर साइड पर एपीआई के उपयोग को नियंत्रित करना चाहेंगे। अन्यथा, बहुत से ग्राहक जल्दी से एपीआई का उपभोग करेंगे।
यदि आपके पास डायनामिक इनपुट का उपयोग करके सर्वर साइड पर गणना, प्राप्त या संसाधित संसाधन हैं, तो क्लाइंट साइड कैशिंग बहुत उपयोगी नहीं होगा।

उदाहरण प्रोजेक्ट:कोविड ट्रैकर

इस परियोजना में, हम जेवियर एविल्स के कोविड एपीआई का उपयोग करेंगे और सबसे अधिक मामलों वाले शीर्ष 10 देशों का पता लगाएंगे। वेबसाइट और स्रोत कोड की जाँच करें।

हम रेडिस का उपयोग कोविड एपीआई से प्रतिक्रियाओं को कैश करने के लिए करेंगे ताकि:

प्रतिक्रिया बहुत तेज होगी। यदि आप वेबसाइट की जांच करते हैं, तो आप देखेंगे कि रेडिस से प्राप्त करने के दौरान कोविड एपीआई को कॉल करना सैकड़ों मिलीसेकंड है, जबकि 1-2 मिलीसेकंड है।
हम बहुत अधिक अनुरोधों के साथ Covid API को अभिभूत नहीं करेंगे।

एपीआई कोड

कोड पहले जांचता है कि क्या हमारे पास रेडिस में एपीआई परिणाम कैश किया गया है। यदि नहीं, तो हम कोविड एपीआई से सभी देशों की सूची प्राप्त करेंगे और उन्हें वर्तमान दिनों के मामलों की संख्या के आधार पर क्रमबद्ध करेंगे और शीर्ष 10 को रेडिस में सहेजेंगे। 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 एक साधारण रिएक्ट कोड है। हम 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 (
    <div className={styles.container}>
      <Head>
        <title>Covid Tracker</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Covid Tracker</h1>

        <p className={styles.description}>
          Top 10 countries with the most cases today
        </p>

        <div className={styles.grid}>
          <div className={styles.card} onClick={refresh}>
            <table className={styles.table}>
              <thead>
                <tr>
                  <th>Country</th>
                  <th>Today Cases</th>
                  <th>Today Deaths</th>
                </tr>
              </thead>
              <tbody>
                {data.data.map((item) => (
                  <tr>
                    <td>{item.country}</td>
                    <td>{item.todayCases}</td>
                    <td>{item.todayDeaths}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <br />
            <em>
              Loaded from {data.type} in <b>{data.latency}</b> milliseconds.
              Click to reload.
            </em>
          </div>
        </div>
      </main>

      <footer className={styles.footer}>
        This is a sample project for the blogpost &nbsp;
        <a
          href="https://blog.upstash.com/nextjs-caching-with-redis"
          target="_blank"
          rel="noopener noreferrer"
        >
          Speed up your Next.js application using Serverless Redis for caching.
        </a>
      </footer>
    </div>
  );
}

बाहरी लिंक

https://swr.vercel.app/docs/with-nextjs

https://brianlovin.com/writing/caching-api-routes-with-next-js

https://coronavirus-19-api.herokuapp.com/countries

https://github.com/javieraviles/covidAPI