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 খুবই সহজ এবং কার্যকরী। কিন্তু কিছু ক্ষেত্রে আপনার সার্ভার সাইড ক্যাশিং প্রয়োজন হবে:

ক্লায়েন্ট সাইড ক্যাশিং ক্লায়েন্টদের জন্য কর্মক্ষমতা উন্নত করে। কিন্তু ক্লায়েন্টের সংখ্যা বেশি হলে, আপনি সার্ভার সাইড রিসোর্সে উচ্চ লোড অনুভব করতে পারেন যা শেষ পর্যন্ত ক্লায়েন্ট সাইড পারফরম্যান্সকেও প্রভাবিত করবে।
যদি আপনি একটি কোটা সহ একটি বহিরাগত API ব্যবহার করেন, আপনি সার্ভারের দিকে API ব্যবহার নিয়ন্ত্রণ করতে চাইবেন৷ অন্যথায়, অনেক ক্লায়েন্ট দ্রুত API ব্যবহার করবে।
যদি আপনার কাছে গতিশীল ইনপুট ব্যবহার করে সার্ভার সাইডে সম্পদ গণনা করা, আনা বা প্রক্রিয়া করা থাকে, তাহলে ক্লায়েন্ট সাইড ক্যাশিং খুব একটা কাজে আসবে না।

উদাহরণ প্রকল্প:কোভিড ট্র্যাকার

এই প্রকল্পে, আমরা Javier Aviles' Covid API ব্যবহার করব এবং সর্বাধিক সংখ্যক কেস সহ শীর্ষ 10 টি দেশ খুঁজে বের করব। ওয়েবসাইট এবং সোর্স কোড চেক করুন।

Covid API থেকে প্রতিক্রিয়া ক্যাশে করতে আমরা Redis ব্যবহার করব তাই:

প্রতিক্রিয়া অনেক দ্রুত হবে। আপনি যদি ওয়েবসাইটটি পরীক্ষা করেন, আপনি দেখতে পাবেন যে Covid API কল করা শত শত মিলিসেকেন্ড এবং Redis থেকে 1-2 মিলিসেকেন্ড।
অনেক অনুরোধে আমরা কোভিড এপিআইকে অভিভূত করব না।

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 হল একটি সাধারণ প্রতিক্রিয়া কোড। আমরা 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