Next.js-এ React Query ব্যবহার করে প্রকল্পে ক্যাশিং কীভাবে বাস্তবায়ন করবেন

ভূমিকা

এই আর্টিকেলে, আমরা Next.js-এ React Query লাইব্রেরী ব্যবহার করে ক্যাশিং বাস্তবায়ন করার ইমপ্লিমেন্ট দেখব। ক্যাশিং ওয়েবসাইটের কর্মক্ষমতা উন্নত করার একটি কার্যকর কৌশল যা ওয়েবসাইটের লোড টাইম কমায়, নেটওয়ার্ক অনুরোধ কমায়, এবং দ্রুত নেভিগেশনকে করতে সাহায্য করে করে। React Query একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরী যা ডেটা ফেচিং, ক্যাশিং এবং স্টেট ম্যানেজমেন্ট সহজ করে তোলে।

প্রয়োজনীয়তা

এই টিউটোরিয়াল শুরু করার আগে, আপনার নিম্নলিখিতগুলি ইনস্টল করা থাকা প্রয়োজন:

Node.js
VS Code

শুরু করা যাক

1. Next.js প্রকল্প তৈরি করুন

আমাদের প্রথমে একটি নতুন Next.js প্রকল্প তৈরি করতে হবে। নিম্নলিখিত কমান্ডটি ব্যবহার করে এটি করা যেতে পারে:

npx create-next-app todo-app

এটি todo-app নামে একটি নতুন ডিরেক্টরি তৈরি করবে এবং প্রয়োজনীয় ইন্ডিপেন্ডেন্স ইনস্টল করবে।

2. React Query ইনস্টল করুন

আমাদের প্রকল্পে React Query লাইব্রেরী ইনস্টল করতে হবে। নিম্নলিখিত কমান্ডটি ব্যবহার করে এটি করা যেতে পারে:

npm install @tanstack/react-query

এটি @tanstack/react-query প্যাকেজ এবং এর ইন্ডিপেন্ডেন্স ইনস্টল করবে।

3. React Query প্রদানকারী তৈরি করুন

আমাদের একটি React Query ক্লায়েন্ট এবং প্রোভাইডার তৈরি করতে হবে। আমরা একটি ReactQueryProvider.js নামে একটি নতুন ফাইলে করতে পারি:

import { useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export default function Providers({ children }) {
  const [queryClient] = useState(new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}

এই কোডটি একটি QueryClient ইনস্ট্যান্স তৈরি করে এবং এটি একটি QueryClientProvider কম্পোনেন্টে পাস বিতর করে। এই প্রোভাইডার আমাদের অ্যাপ্লিকেশনের অন্যান্য অংশে React Query অ্যাক্সেস করতে দেবে।

প্রদানকারী রুট লেআউটে ইমপোর্ট করুন

আমাদের রুট লেআউট ফাইলে (src/app/layout.js) প্রোভাইডার ইমপোর্ট করতে হবে এবং এটি আমাদের অ্যাপ্লিকেশনের চিলড্রেন (children) গুলোকে র‍্যাপ করতে হবে:

import "./globals.css";
import Providers from "./ReactQueryProvider";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

এই কোডটি আমাদের অ্যাপ্লিকেশনের সমস্ত পেজ-এ React Query অ্যাক্সেস করতে দেবে।

5. useQuery হুক ব্যবহার করুন

এখন আমরা useQuery হুক ব্যবহার করে ডেটা ফেচ করতে এবং ক্যাশ করতে পারি। আসুন একটি todos পেজ তৈরি করা যাক যেখানে আমরা JSONPlaceholder API থেকে টোডোগুলো ফেচ করব এবং ক্যাশিং ব্যবহার করব।

import { useQuery } from "@tanstack/react-query";
import Link from "next/link";

const getTodos = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos");
  const data = await response.json();
  return data;
};

const TodosPage = () => {
  const { isLoading, data } = useQuery({
    queryKey: ["todos"],
    queryFn: getTodos,
    staleTime: 1000 * 30, // 30 সেকেন্ড
  });

  if (isLoading) return <div className="text-4xl text-center py-5">লোড হচ্ছে...</div>;

  return (
    <div className="p-5">
      <div className="flex gap-4 items-center">
        <Link href="/">হোম</Link>
        <Link href="/todos">টোডো</Link>
      </div>
      <h1 className="text-4xl font-bold text-center py-5">টোডোগুলো</h1>

      <div>
        {data?.map((todo) => (
          <div key={todo.id} className="border p-2 my-2">
            <h2 className="text-xl font-bold">{todo.title}</h2>
            <p>{todo.completed ? "সম্পন্ন" : "অসম্পন্ন"}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default TodosPage;

উপরের কোডটি নিম্নলিখিত কাজ করে:

getTodos ফাংশনটি JSONPlaceholder API থেকে টোডোগুলো ফেচ করে।
useQuery হুক ব্যবহার করে ডেটা ফেচ এবং ক্যাশ করে।
queryKey প্রপার্টির ভেলু হবে এই কোয়ালিটির নাম যেটা অ্যারে অফ স্ক্রিন হিসাবে দিতে হবে যেমনঃ ["todos"]।
queryFn প্রোপার্টিটির ভেলু একটি async function, যা ডেটা ফেচ করার জন্য ব্যবহৃত হয়।
staleTime প্রোপার্টিটিতে 1000 * 30 (30 সেকেন্ড) এ সেট করা আছে। এটি নির্দেশ করে যে ক্যাশে থাকা ডেটা 30 সেকেন্ডের জন্য ভ্যালিড থাকবে। 30 সেকেন্ডের পরে।
isLoading অবস্থাটি নির্দেশ করে ডেটা লোড হচ্ছে কিনা।
data প্রপার্টিটি আমাদের ডেটা প্রদান করে।

এখন যদি আমরা হোমপেজে গিয়ে আবার টুডু পেইজে ৫ সেকেন্ডের ভিতরে আসি তাইলে এই API-টি আবার রিকোয়েস্ট করবে না।

6. সুবিধাগুলি

React Query ব্যবহার করে ক্যাশিং এর সুবিধাগুলি হল:

পেজ লোডের সময় হ্রাস: ক্যাশে থাকা ডেটা ব্যবহার করে, আমরা পেজ লোডের সময় উল্লেখযোগ্যভাবে হ্রাস করতে পারি।
নেটওয়ার্ক অনুরোধ হ্রাস: আমরা কেবলমাত্র প্রয়োজনীয়

6. সুবিধাগুলি

React Query ব্যবহার করে ক্যাশিং এর সুবিধাগুলি হল:

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

7. সিদ্ধান্ত

React Query একটি জনপ্রিয় লাইব্রেরী যা ক্যাশিং সহ ডেটা ফেচিং এবং স্টেট ম্যানেজমেন্ট সহজ করে তোলে। এই আর্টিকেলে, আমরা Next.js অ্যাপ্লিকেশনে React Query ব্যবহার করে ক্যাশিং বাস্তবায়ন দেখিয়েছি। ক্যাশিং ব্যবহার করে, আমরা আমাদের অ্যাপ্লিকেশনের কর্মক্ষমতা উন্নত করতে পারি এবং ব্যবহারকারী অভিজ্ঞতা উন্নত করতে পারি।

অতিরিক্তঃ

আপনি আরও জটিল ক্যাশিং কৌশল, যেমন কোন ডেটা ক্যাশ করা উচিত সে সম্পর্কে আরও জানতে React Query ডকুমেন্টেশন দেখতে পারেন।
আপনি ডেটা মিউটেশান এবং ক্যাশ অকার্যকরকরণ সম্পর্কেও জানতে পারেন, যা আপনার অ্যাপ্লিকেশনের ডেটা সর্বদা সাম্প্রতিক থাকা নিশ্চিত করে।
আশা করি এই নিবন্ধটি আপনাকে Next.js-এ React Query ব্যবহার করে ক্যাশিং বাস্তবায়ন করতে সাহায্য করবে!

Video Link : https://youtu.be/8H06IfnHpMo
Full Code: https://github.com/imranBappy/paly-with-react-query