Client-Side Data Fetching এর জন্য useEffect ব্যবহার করা

Next.js একটি React ফ্রেমওয়ার্ক, যা রেন্ডারিং পদ্ধতি হিসেবে Server-Side Rendering (SSR) এবং Static Site Generation (SSG) সমর্থন করে। তবে কখনো কখনো, আপনাকে ক্লায়েন্ট-সাইডে ডেটা ফেচ করতে হতে পারে। এর জন্য React এর useEffect হুক ব্যবহার করা হয়, যা একটি কম্পোনেন্ট মাউন্ট হওয়ার পর বা নির্দিষ্ট ভ্যারিয়েবলের পরিবর্তনে একটি কার্যকলাপ (অথবা API কল) চালানোর জন্য উপযোগী।

এই টিউটোরিয়ালে আমরা দেখব কীভাবে useEffect হুক ব্যবহার করে ক্লায়েন্ট-সাইড ডেটা ফেচিং করা যায়।

১. useEffect হুক কী?

React এর useEffect হুক একটি side effect পরিচালনা করতে ব্যবহৃত হয়, যেমন:

• ডেটা ফেচ করা
• ইভেন্ট লিসেনার অ্যাড করা
• টাইলস বা ডকুমেন্ট শিরোনাম আপডেট করা

এই হুকটি কম্পোনেন্ট রেন্ডার হওয়ার পর কার্যকর হয় এবং আপনি নির্দিষ্ট শর্তে এটি চালাতে পারেন।

২. ক্লায়েন্ট-সাইড ডেটা ফেচিং করতে useEffect ব্যবহার করা

Next.js এ ক্লায়েন্ট-সাইড ডেটা ফেচিং করার জন্য সাধারণত useEffect হুক ব্যবহার করা হয়, যেখানে আপনি API কল করতে পারেন অথবা অন্য কোনো asynchronous অপারেশন পরিচালনা করতে পারেন।

উদাহরণ: useEffect দিয়ে API কল করা

ধরা যাক, আপনি একটি পাবলিক API থেকে ডেটা ফেচ করতে চান, এবং তা আপনার কম্পোনেন্টে রেন্ডার করতে চান।

// pages/index.js
import { useEffect, useState } from 'react';

const Home = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // API কল করা
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const result = await response.json();
        setData(result);  // ডেটা স্টেটে সেট করা
        setLoading(false); // লোডিং স্টেট false করা
      } catch (error) {
        setError(error);  // যদি কোনো এরর হয় তবে সেট করা
        setLoading(false); // লোডিং স্টেট false করা
      }
    };

    fetchData(); // ফেচ ফাংশন কল করা
  }, []); // কম্পোনেন্ট মাউন্ট হওয়ার পরে একবারই কল হবে

  // লোডিং, ডেটা বা এরর শো করা
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Fetched Data</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

৩. কোড ব্যাখ্যা:

1. useState হুক:
   • data: API থেকে পাওয়া ডেটা সংরক্ষণ করে।
   • loading: ডেটা লোড হচ্ছে কিনা সেটা ট্র্যাক করে।
   • error: যদি কোনো ত্রুটি ঘটে, সেটি সংরক্ষণ করে।
2. useEffect হুক:
   • এই হুকটি কম্পোনেন্ট মাউন্ট হওয়ার পর একবার চালানোর জন্য ব্যবহার করা হয়।
   • এর মধ্যে API কল করা হয় এবং ডেটা setData ফাংশন দ্বারা স্টেটে সেট করা হয়।
   • API কল সফল হলে লোডিং স্টেট false করা হয়, আর যদি কোনো ত্রুটি ঘটে তবে setError এর মাধ্যমে সেই ত্রুটির তথ্য পাওয়া যায়।
3. [] (ডিপেনডেন্সি অ্যারে):
   • এই অ্যারে ব্যবহৃত হয় useEffect হুকটির কার্যকলাপ নির্ধারণ করতে। এখানে একটি খালি অ্যারে ([]) ব্যবহার করা হয়েছে, যার মানে হলো কেবলমাত্র কম্পোনেন্ট মাউন্ট হওয়ার পর একবার এই কোডটি চালানো হবে।

৪. useEffect হুকের সাথে ডেটা ফেচিংয়ের অন্যান্য পদ্ধতি

১. ডেটা রিফ্রেশ বা আপডেট করা:

কখনো কখনো, আপনাকে ডেটা ফেচ করার পরে তা রিফ্রেশ বা আপডেট করতে হতে পারে। আপনি useEffect এর ডিপেনডেন্সি অ্যারে ব্যবহার করে এই কাজটি করতে পারেন।

// পেজের কোনো ডেটা ফেচিং এর জন্য ডিপেনডেন্সি অ্যারে ব্যবহার করা
useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/posts');
    const result = await response.json();
    setData(result);
  };

  fetchData();
}, [someDependency]); // কিছু নির্দিষ্ট ডিপেনডেন্সির পরিবর্তন হলে ডেটা রিফ্রেশ হবে

এখানে [someDependency] হল সেই ভ্যারিয়েবল বা স্টেট যার পরিবর্তনে API কল আবার হবে।

২. Cleanup ফাংশন ব্যবহার করা:

কখনো কখনো, আপনাকে useEffect হুকের মধ্যে ক্লিনআপ কোড চালাতে হতে পারে (যেমন ইভেন্ট লিসেনার রিমুভ করা)। এর জন্য আপনি একটি ক্লিনআপ ফাংশন ব্যবহার করতে পারেন।

useEffect(() => {
  // API কল বা ইভেন্ট লিসেনার অ্যাড করা

  return () => {
    // ক্লিনআপ কোড, যেমন ইভেন্ট লিসেনার রিমুভ
  };
}, []); // এই হুকটি শুধুমাত্র একবার চালানো হবে

৫. সারাংশ:

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