Next.js একটি খুব সফল ওয়েব ফ্রেমওয়ার্ক যা সার্ভার সাইড রেন্ডারিং (SSR) এবং স্ট্যাটিক সাইট জেনারেশন (SSG) একসাথে নিয়ে আসে। SSG CDN ক্যাশিংর মাধ্যমে আপনার ওয়েবসাইট স্পিড আপ করে, SSR SEO এবং ডাইনামিক ডেটার সাহায্য করে।
Server side rendering একটি চমৎকার ফিচার যা আপনাকে ফুল-স্ট্যাক অ্যাপ্লিকেশন লিখতে সাহায্য করে। কিন্তু সতর্ক না হলে আপনার Next.js ওয়েবসাইটের পারফরম্যান্স সহজেই প্রভাবিত হতে পারে। এই ব্লগ পোস্টে আমি ব্যাখ্যা করব কীভাবে Redis ব্যবহার করে আপনার Next.js API কলগুলো স্পিড আপ করতে হয়। তার আগে একটি সহজ উপায় উল্লেখ করছি।
API কলগুলিতে SWR ব্যবহার করুন
SWR একটি খুব স্মার্ট ডেটা ফেচিং লাইব্রেরি। এটি HTTP ক্যাশ ইনভ্যালিডেশন স্ট্র্যাটেজি (stale-while-revalidate) ব্যবহার করে যা HTTP RFC 5861-এ বর্ণিত। SWR দিয়ে API কল করলে এটিcached ডেটা ইনস্ট্যান্টলি রিটার্ন করে কিন্তু অ্যাসিনক্রোনাসলি কারেন্ট ডেটা ফেচ করে আপনার UI আপডেট করে। আপনি আপনার staleness টলারেন্স অনুযায়ী refreshInterval সেট করতে পারেন।
const { data: user } = useSWR('/api/user', { refreshInterval: 2000 })উপরের কোডে, user API প্রতি ২ সেকেন্ডে রিফ্রেশ হবে।
Redis দিয়ে ক্যাশিং
SWR খুব সিম্পল এবং ইফেক্টিভ। কিন্তু কিছু কেসে আপনাকে সার্ভার সাইড ক্যাশিং দরকার পড়বে:
- ক্লায়েন্ট সাইড ক্যাশিং ক্লায়েন্টদের পারফরম্যান্স বাড়ায়। কিন্তু যদি ক্লায়েন্টের সংখ্যা বেশি হয়, তবে সার্ভার সাইড রিসোর্সে হাই লোড পড়ে যা ক্লায়েন্ট সাইড পারফরম্যান্সও প্রভাবিত করে।
- যদি আপনি কোটা সহ একটি এক্সটার্নাল API কনসাম করেন, তবে আপনি সার্ভার সাইডে API ইউজ কন্ট্রোল করতে চাইবেন। অন্যথায়, অনেক ক্লায়েন্ট দ্রুত API কোটা শেষ করবে।
- যদি আপনার রিসোর্স সার্ভার সাইডে ডাইনামিক ইনপুট দিয়ে ক্যালকুলেট, ফেচ বা প্রসেস হয়, তবে ক্লায়েন্ট সাইড ক্যাশিং খুব কাজে আসবে না।
উদাহরণ প্রজেক্ট: Covid Tracker
এই প্রজেক্টে আমরা Javier Aviles’ Covid API ব্যবহার করব এবং আজকের সবচেয়ে বেশি কেস বিশিষ্ট টপ ১০ দেশ খুঁজব। ওয়েবসাইট এবং সোর্স কোড চেক করুন।
আমরা Covid API-এর রেসপন্স ক্যাশ করতে Redis ব্যবহার করব যাতে:
- রেসপন্স অনেক দ্রুত হবে। ওয়েবসাইট চেক করলে দেখবেন Covid API কল করলে সেকেন্ডের শতাংশ লাগে যেখানে Redis থেকে ফেচ করলে ১-২ মিলিসেকেন্ড।
- Covid API-কে অনেক রিকোয়েস্ট দিয়ে ওভারওয়েল্ম করব না।
API কোড
কোড প্রথমে চেক করে আমাদের Redis-এ API রেজাল্ট ক্যাশড আছে কিনা। নাই থাকলে Covid API থেকে সব কান্ট্রির লিস্ট নেয়, আজকের কেস সংখ্যা অনুযায়ী সোর্ট করে টপ ১০ Redis-এ সেভ করে। Redis-এ সেভ করার সময় "EX" 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.
);
}