Cookie Consent by Free Privacy Policy Generator 📌 Next.js-এ React Query ব্যবহার করে প্রকল্পে ক্যাশিং কীভাবে বাস্তবায়ন করবেন


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


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

ভূমিকা

এই আর্টিকেলে, আমরা 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 অ্যাক্সেস করতে দেবে।

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

আমাদের রুট লেআউট ফাইলে (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 ব্যবহার করে ক্যাশিং বাস্তবায়ন করতে সাহায্য করবে!

Full Code: https://github.com/imranBappy/paly-with-react-query

...

✅ This Week In React #185: React Conf, React Query, refs, Next.js after, mini-react...


📈 44.94 Punkte

✅ This Week In React #185: React Conf, React Query, refs, Next.js after, mini-react...


📈 44.94 Punkte

✅ What is react-query? Why should we use react-query?


📈 35.35 Punkte

✅ CodeSOD: Query Query Query


📈 31.52 Punkte

✅ This Week In React #187: Next.js, Expo, Popover, rethrow, SWR, React-Query, Astro, PPR...


📈 30.6 Punkte

✅ Building a CRUD App with Next.js, React Query, React Hook Form, and Yup


📈 30.6 Punkte

✅ I Built A Library Management System With Charts Using React, Supabase, Shadcn/ui And React Query


📈 24.85 Punkte

✅ How to Implement a Global Error Handling Popup in React Native with React Query


📈 24.85 Punkte

✅ Streamlining React: Utilizing React Query for Scalability


📈 24.85 Punkte

✅ How to Implement React Infinite Scrolling with React Query v5


📈 24.85 Punkte

✅ How to Implement React Infinite Scrolling with React Query v5


📈 24.85 Punkte

✅ Advanced Server Rendering | React Query with Next.js App Router


📈 23.43 Punkte

✅ Optimized Infinite Scroll with Next.js 14 Server Actions and React Query


📈 23.43 Punkte

✅ Handling React OTP Input Auth Web | React Native using react-otp-kit package


📈 21.51 Punkte

✅ Handling React OTP Input Auth Web | React Native using react-otp-kit package


📈 21.51 Punkte

✅ What’s New in React 19? React Canaries, Actions, and React Compiler


📈 21.51 Punkte

✅ TANStack Query: How It Changes the Way You Query APIs


📈 21.01 Punkte

✅ CVE-2016-15020 | liftkit database up to 2.13.1 src/Query/Query.php processOrderBy sql injection


📈 21.01 Punkte

✅ GitHub Security Lab: ihsinme: CPP add query for: CPP Add query for CWE-20 Improper Input Validation


📈 21.01 Punkte

✅ Nelson Open Source ERP 6.3.1 db/utils/query/data.xml query sql injection


📈 21.01 Punkte

✅ More DNS over HTTPS: Become One With the Packet. Be the Query. See the Query, (Thu, Dec 19th)


📈 21.01 Punkte

✅ Trend Micro ScanMail for Exchange 12.0 Log Query/Quarantine Query cross site scripting


📈 21.01 Punkte

✅ Trend Micro ScanMail for Exchange 12.0 Log Query/Quarantine Query Cross Site Scripting


📈 21.01 Punkte

✅ New Css Media Query Syntax(Media Query Level 4 or MQ4)


📈 21.01 Punkte

✅ How SQL Query works? SQL Query Execution Order for Tech Interview


📈 21.01 Punkte











matomo

Datei nicht gefunden!