Next.js এ ডেটা ফেচিং এর জন্য SWR (Stale-While-Revalidate) একটি অত্যন্ত জনপ্রিয় লাইব্রেরি। এটি এমন একটি প্যাটার্ন অনুসরণ করে যেখানে প্রথমে পুরানো ডেটা (যেটি ক্যাশে করা থাকে) প্রদর্শন করা হয়, এরপর নতুন ডেটা সার্ভার থেকে ফেচ করা হয় এবং সেই নতুন ডেটা পরবর্তীতে রেন্ডার করা হয়। এর ফলে, ইউজার খুব দ্রুত রেসপন্স পায় এবং পেজ লোডিং টাইম কমে যায়। এটি সাধারণত React Query এর মতো স্টেট ম্যানেজমেন্ট লাইব্রেরির তুলনায় অনেক সহজ এবং মৃদু।
SWR এর সুবিধা:
- স্মুথ ইউজার এক্সপেরিয়েন্স: ক্যাশিং এবং রিয়েল-টাইম ডেটা ফেচিংয়ের মাধ্যমে স্লো লোডিং কমাতে সাহায্য করে।
- কমপ্লেক্স রিকোয়েস্ট ম্যানেজমেন্ট: ডেটা রিফ্রেশ, অটোমেটিক রিইনভ্যালিডেশন, এবং পুনরায় রিকোয়েস্ট করার মতো ফিচার সাপোর্ট করে।
- এপিআই কলের জন্য সহজ কাস্টমাইজেশন: SWR API কনফিগারেশনের মাধ্যমে আপনি আপনার রিকোয়েস্ট কাস্টমাইজ করতে পারবেন।
SWR সেটআপ এবং ইনস্টলেশন
SWR ব্যবহার করতে প্রথমে আপনাকে SWR লাইব্রেরিটি ইনস্টল করতে হবে।
SWR ইনস্টলেশন:
npm install swr
এটি ইনস্টল করার পর, আপনি সহজেই SWR ফিচার ব্যবহার করতে পারবেন।
SWR এর মাধ্যমে ডেটা ফেচ করা
SWR এর মূল কাজ হল data fetching এবং revalidation। এটি আপনার কম্পোনেন্টের মধ্যে ডেটা ফেচ এবং ক্যাশিং নিয়ে কাজ করে।
SWR ব্যবহার করে ডেটা ফেচ করার উদাহরণ:
pages/index.js- SWR দিয়ে ডেটা ফেচ করা
// pages/index.js
import useSWR from 'swr';
// ফেচার ফাংশন
const fetcher = (url) => fetch(url).then((res) => res.json());
export default function Home() {
// SWR হুকের মাধ্যমে ডেটা ফেচ করা
const { data, error } = useSWR('https://api.example.com/posts', fetcher);
if (error) return <div>Failed to load data</div>;
if (!data) return <div>Loading...</div>;
return (
<div>
<h1>Posts</h1>
<ul>
{data.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
কী হচ্ছে এখানে:
useSWRহুক: এটি SWR হুক যেটি ডেটা ফেচ করার জন্য ব্যবহার করা হয়। এতে প্রথম আর্গুমেন্ট হিসেবে ইউআরএল এবং দ্বিতীয় আর্গুমেন্ট হিসেবে ফেচ ফাংশন দেওয়া হয়।fetcherফাংশন: এটি একটি কাস্টম ফাংশন যা API রিকোয়েস্ট করে এবং JSON রেসপন্স ফেরত দেয়।data: এটি সেই ডেটা যা API থেকে ফিরিয়ে আনা হয়।error: API রিকোয়েস্টে কোনো সমস্যা হলে এটি প্রাপ্ত ত্রুটি (Error) ধারণ করবে।- লোডিং এবং এরর হ্যান্ডলিং: ডেটা লোড হচ্ছে না অথবা এরর থাকলে ব্যবহারকারীকে উপযুক্ত বার্তা দেখানো হয়।
এখন, যখনই আপনার ইউজার অ্যাপ পেজটি রিফ্রেশ করবে, SWR ক্যাশে থাকা পুরনো ডেটা প্রথমে দেখাবে, তারপর নতুন ডেটা পুনরায় সার্ভার থেকে ফেচ করবে এবং ডিসপ্লে করবে।
SWR এর অতিরিক্ত কনফিগারেশন
SWR এর বেশ কিছু কনফিগারেশন অপশন আছে যেগুলো ডেটা ফেচিং এবং রিফ্রেশ পদ্ধতিকে কাস্টমাইজ করতে ব্যবহৃত হয়।
১. Revalidation পদ্ধতি:
SWR আপনাকে রিফ্রেশের সময় কীভাবে ডেটা ফেচ করতে হবে তা কনফিগার করতে দেয়। উদাহরণস্বরূপ, আপনি চাইলে একাধিক সেকেন্ড পর পর রিফ্রেশ করতে পারেন।
const { data, error } = useSWR('https://api.example.com/posts', fetcher, {
revalidateOnFocus: true, // যখন ইউজার ফোকাসে ফিরে আসবে তখন ডেটা রিফ্রেশ হবে
refreshInterval: 10000, // প্রতি ১০ সেকেন্ড পর পর ডেটা রিফ্রেশ হবে
});
২. Error Handling:
SWR ত্রুটি মোকাবেলা করার জন্য খুবই সহজ উপায় প্রদান করে। আপনি যদি API থেকে কোনো ত্রুটি পান তবে error অবজেক্টটি সেট হয়ে যাবে, যা আপনি UI তে হ্যান্ডেল করতে পারেন।
if (error) {
console.error(error); // ত্রুটির বিস্তারিত লগ
return <div>Failed to load data. Please try again.</div>;
}
৩. পেজিনেশন (Pagination):
SWR ব্যবহার করে আপনি পেজিনেশনও হ্যান্ডেল করতে পারেন। নিচে একটি উদাহরণ দেওয়া হল যেখানে পেজিনেশন করা হচ্ছে।
const { data, error } = useSWR(`https://api.example.com/posts?page=1`, fetcher);
সারাংশ
SWR (Stale-While-Revalidate) Next.js এ ডেটা ফেচিং ব্যবস্থাপনায় অত্যন্ত শক্তিশালী এবং সহজ একটি টুল। এটি ক্যাশিং, রিয়েল-টাইম ডেটা রিফ্রেশ এবং ইউজারের জন্য স্মুথ এক্সপেরিয়েন্স প্রদান করে। SWR ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের পারফরমেন্স উন্নত করতে পারেন এবং ডেটা লোডিংকে আরো দ্রুত এবং কার্যকর করতে সক্ষম হবেন।
Read more
