Next.js এর Client-Side Rendering এবং Data Fetching গাইড ও নোট

Next.js এ রেন্ডারিং তিনটি প্রধানভাবে করা যায়: Server-Side Rendering (SSR), Static Site Generation (SSG) এবং Client-Side Rendering (CSR)। এখানে আমরা Client-Side Rendering (CSR) এবং Data Fetching এর ব্যাখ্যা করব, যা আপনার অ্যাপ্লিকেশনের ইন্টারঅ্যাকটিভিটি এবং ডাইনামিক কনটেন্ট লোডের জন্য গুরুত্বপূর্ণ।

১. Client-Side Rendering (CSR) কী?

Client-Side Rendering (CSR) হল এমন একটি রেন্ডারিং পদ্ধতি, যেখানে ব্রাউজারের JavaScript কোডটি ডাউনলোড হওয়ার পর, পেজের কনটেন্ট ব্রাউজারেই রেন্ডার হয়। এর মানে হল যে, সার্ভার শুধুমাত্র প্রথম HTML পেজটি সরবরাহ করে, এবং পরবর্তীতে সমস্ত রেন্ডারিং এবং ডেটা ফেচিং ব্রাউজারে চলে যায়।

Next.js এ CSR ব্যবহৃত হয় সাধারণত যখন:

• ডাইনামিক কনটেন্ট প্রয়োজন।
• ইউজার ইন্টারঅ্যাকশন এর মাধ্যমে কনটেন্ট আপডেট করতে হয়।
• পেজ লোড হওয়ার পর, ইন্টারঅ্যাকটিভ UI প্রদর্শন করতে হয়।

CSR এর পদ্ধতি:

• useEffect Hook: React এর useEffect হুক ব্যবহার করে আপনি কম্পোনেন্ট মাউন্ট হওয়ার পর ডেটা ফেচ করতে পারেন।
• JavaScript Fetch API / Axios: ডেটা ফেচ করতে Fetch API অথবা Axios ব্যবহার করা যেতে পারে।
• Dynamic Routing: ডাইনামিক রাউটিংয়ের জন্য next/router এর মাধ্যমে রুট পরিবর্তন করা।

উদাহরণ:

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

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')  // API থেকে ডেটা ফেচ
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      <h1>Client-Side Rendering Example</h1>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

এখানে, useEffect হুকটি ডেটা ফেচ করতে ব্যবহৃত হচ্ছে, এবং প্রথমে ডেটা লোড না হওয়া পর্যন্ত Loading... মেসেজ দেখানো হচ্ছে। ডেটা লোড হয়ে গেলে, সেটি UI তে প্রদর্শিত হবে।

২. Data Fetching in Next.js

Next.js এ ডেটা ফেচ করার জন্য কয়েকটি পদ্ধতি রয়েছে, যার মধ্যে Client-Side Rendering (CSR), Server-Side Rendering (SSR) এবং Static Site Generation (SSG) এর মধ্যে নির্বাচন করতে পারেন। এখানে আমরা CSR এর সঙ্গে ডেটা ফেচিংয়ের বিষয়টি ব্যাখ্যা করব।

২.১ Client-Side Data Fetching

CSR ব্যবহারের সময়, ডেটা ফেচিং সাধারণত কম্পোনেন্টের মধ্যে useEffect হুক ব্যবহার করে করা হয়। এখানে অ্যাপ্লিকেশন রেন্ডার হওয়া সাপেক্ষে ডেটা ফেচ হয়।

উদাহরণ:

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

export default function Posts() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts') // API থেকে ডেটা ফেচ
      .then((response) => response.json())
      .then((data) => {
        setPosts(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

এই উদাহরণে, useEffect ব্যবহার করা হয়েছে API থেকে ডেটা ফেচ করার জন্য। প্রথমে loading স্টেটটি true থাকবে, এবং ডেটা ফেচ হয়ে গেলে সেটি false হয়ে যাবে।

২.২ API Routes for Serverless Functions

Next.js এ আপনি API routes ব্যবহার করে ডেটা ফেচিংয়ের জন্য সার্ভারলেস ফাংশন তৈরি করতে পারেন। এর মাধ্যমে আপনি ক্লায়েন্ট থেকে সার্ভারে API কল করে ডেটা পেতে পারেন।

Next.js এর API routes আপনাকে REST API বা GraphQL API তৈরি করতে সাহায্য করে যা কেবল সার্ভার সাইডেই রান করবে।

API Route উদাহরণ:

// pages/api/posts.js
export default async function handler(req, res) {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  res.status(200).json(data);
}

এখানে /api/posts API রাউট তৈরি করা হয়েছে, যা ক্লায়েন্ট সাইড থেকে ডেটা ফেচ করার জন্য ব্যবহার করা হবে।

ক্লায়েন্ট সাইডে ডেটা ফেচিং:

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

export default function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('/api/posts') // Local API route থেকে ডেটা ফেচ
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

এখানে, আমরা /api/posts রাউট থেকে ডেটা ফেচ করেছি যা সার্ভারে /pages/api/posts.js এ ডিফাইন করা ছিল।

সারাংশ

Next.js এ Client-Side Rendering (CSR) এর মাধ্যমে ডেটা ফেচ করা হয় মূলত React হুক (যেমন useEffect) ব্যবহার করে। ক্লায়েন্ট সাইডের ডেটা ফেচিং খুবই গুরুত্বপূর্ণ যখন আপনার অ্যাপ্লিকেশন ডাইনামিক এবং ইউজারের ইনপুট বা রিয়েল-টাইম ডেটার ওপর নির্ভরশীল। এর মাধ্যমে আপনি সার্ভার থেকে ডেটা ফেচ করতে পারেন এবং পেজ রেন্ডারিং করতে পারেন, যা অ্যাপ্লিকেশনের ইন্টারঅ্যাকটিভিটি বাড়ায়।

Client-Side Rendering (CSR) হল একটি ওয়েব অ্যাপ্লিকেশন তৈরির পদ্ধতি, যেখানে সমস্ত রেন্ডারিং (HTML কনটেন্ট) ক্লায়েন্টের ব্রাউজারে হয়, সার্ভারে নয়। অর্থাৎ, যখন ইউজার কোনো পেজ এক্সেস করেন, তখন সার্ভার কেবল JavaScript, CSS এবং অন্যান্য রিসোর্স পাঠায় এবং ব্রাউজার এসব ফাইলের সাহায্যে পেজের কন্টেন্ট রেন্ডার করে।

Next.js এ CSR কিভাবে কাজ করে, এবং এর সাথে অন্যান্য রেন্ডারিং পদ্ধতির মধ্যে পার্থক্য কী, তা নিচে বিস্তারিতভাবে আলোচনা করা হয়েছে।

Client-Side Rendering (CSR) এর ধারণা

CSR এর মধ্যে, সমস্ত রেন্ডারিং ব্রাউজারেই সম্পন্ন হয়। প্রথমে একটি লোডিং পেজ (যেমন: একটি সাদা পৃষ্ঠা) বা অ্যাপ্লিকেশনের মূল ফাইলটি সার্ভার থেকে পাঠানো হয়। এরপর JavaScript ফাইলগুলো ক্লায়েন্ট সাইডে রান করতে শুরু করে এবং ব্রাউজারে পেজের কন্টেন্ট রেন্ডার করা হয়।

এই পদ্ধতিতে, যখন ইউজার প্রথমবার অ্যাপ্লিকেশন লোড করে, সার্ভার শুধুমাত্র প্রয়োজনীয় HTML, CSS, এবং JavaScript ফাইলগুলো পাঠায়। তারপর JavaScript কোডের মাধ্যমে ইউজারের জন্য প্রাসঙ্গিক কন্টেন্ট ডাইনামিকভাবে রেন্ডার হয়।

Next.js এ Client-Side Rendering (CSR)

Next.js মূলত Server-Side Rendering (SSR) এবং Static Site Generation (SSG) এর সুবিধা প্রদান করে, কিন্তু আপনি চাইলে **Client-Side Rendering (CSR)**ও ব্যবহার করতে পারেন। CSR সাধারণত এমন সিচুয়েশনে ব্যবহার করা হয় যেখানে পেজ বা ডেটা দ্রুত পরিবর্তিত হয় এবং সার্ভার-সাইড রেন্ডারিং বা স্ট্যাটিক সাইট জেনারেশন প্রয়োজন নয়।

CSR কিভাবে কাজ করে Next.js এ?

Next.js এ CSR ব্যবহার করতে হলে, সাধারণত আপনি useEffect হুক বা ক্লায়েন্ট-সাইড ফেচিং ব্যবহার করবেন। এর মাধ্যমে আপনি ডেটা বা কন্টেন্টের রেন্ডারিংকে ক্লায়েন্টের উপর নির্ভরশীল করতে পারেন।

উদাহরণ:

ধরা যাক, আপনি একটি API থেকে ডেটা ফেচ করতে চান এবং সেই ডেটা ক্লায়েন্ট সাইডে রেন্ডার করতে চান। এর জন্য আপনি useEffect এবং useState হুক ব্যবহার করতে পারেন।

import { useEffect, useState } from 'react';

export default function ClientSidePage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // এখানে API থেকে ডেটা ফেচ করা হচ্ছে
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);  // [] ডিপেন্ডেন্সি অ্যারে, যাতে এটি একবারই রান হয়

  return (
    <div>
      <h1>Client-Side Rendering Example</h1>
      {data ? (
        <ul>
          {data.map(post => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

এখানে, useEffect হুকটি ক্লায়েন্ট সাইডে ডেটা ফেচিং সম্পাদন করে এবং useState এর মাধ্যমে ডেটা স্টেট আপডেট করা হয়। পেজটি প্রথমে "Loading..." দেখাবে এবং পরে ডেটা আসলে তা রেন্ডার হবে।

CSR এর সাথে Next.js এর SSR এর পার্থক্য

• SSR (Server-Side Rendering): সার্ভার প্রতি পেজের জন্য HTML রেন্ডার করে এবং ক্লায়েন্টে প্রেরণ করে। এটি SEO এবং লোডিং টাইমের জন্য ভাল।
• CSR (Client-Side Rendering): শুধুমাত্র JavaScript ব্যবহার করে ব্রাউজারে ডেটা রেন্ডার করা হয়। প্রথম লোডিং সময় অনেক বেশি হতে পারে, তবে এটি সার্ভার লোড কমিয়ে দেয় এবং অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ করে তোলে।

CSR এর সুবিধা এবং অসুবিধা

সুবিধা:

• ফাস্ট ইন্টারঅ্যাকশন: একবার পেজ লোড হলে, সমস্ত ইন্টারঅ্যাকশন ব্রাউজারে হয়, তাই ফাস্ট রেসপন্স টাইম এবং লোডিং স্পিড।
• ব্রাউজার-ভিত্তিক: সমস্ত রেন্ডারিং ক্লায়েন্ট সাইডে হওয়ায় সার্ভারে কম চাপ পড়ে।
• ডায়নামিক কন্টেন্ট: যদি আপনার অ্যাপ্লিকেশন ডাইনামিক কন্টেন্ট প্রদর্শন করে এবং頻繁ভাবে আপডেট হয়, তাহলে CSR একটি ভাল পছন্দ।

অসুবিধা:

• SEO তে সমস্যা: সার্ভার সাইড রেন্ডারিংয়ের তুলনায় SEO তে কিছু সমস্যা দেখা দিতে পারে, কারণ সার্চ ইঞ্জিনগুলি প্রথমে শুধুমাত্র HTML পেজ ক্রল করে এবং JavaScript রান করে না। তবে, Next.js আপনাকে SSR ব্যবহার করতে সাহায্য করে SEO উন্নত করার জন্য।
• প্রথম লোডের সময় বেশি: প্রথমবার লোড হলে JavaScript ফাইলগুলো ব্রাউজারে লোড হতে সময় নেয়, যার কারণে ইনিশিয়াল লোডের সময় বেশি হতে পারে।

সারাংশ

Client-Side Rendering (CSR) হল এমন একটি পদ্ধতি যেখানে সমস্ত কন্টেন্ট ব্রাউজারে রেন্ডার হয় এবং সার্ভারের সাহায্য ছাড়াই UI তৈরি হয়। Next.js এ CSR ব্যবহার করতে useEffect হুক এবং ক্লায়েন্ট-সাইড ডেটা ফেচিং ব্যবহৃত হয়। এটা সাধারণত ডাইনামিক অ্যাপ্লিকেশন এবং এমন সিচুয়েশনে উপযোগী যেখানে দ্রুত রিয়েল-টাইম ডেটা আপডেট প্রয়োজন। তবে, SEO এবং প্রথম লোডের বিষয়টি একটু চ্যালেঞ্জিং হতে পারে, তাই Next.js এ প্রাথমিকভাবে SSR এবং SSG এর সুবিধা নেওয়া হয়।

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 একটি শক্তিশালী টুল।

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 ব্যবহার করে ডেটা ফেচ করার উদাহরণ:

1. 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 ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের পারফরমেন্স উন্নত করতে পারেন এবং ডেটা লোডিংকে আরো দ্রুত এবং কার্যকর করতে সক্ষম হবেন।

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

১. স্ট্যাটিক ডেটা ব্যবস্থাপনা (Static Data Management)

স্ট্যাটিক ডেটা ব্যবস্থাপনা মানে হল এমন ডেটা যা একবার তৈরি হয়ে গেলে, তা পরিবর্তিত না হয়ে পুরো অ্যাপ্লিকেশন জুড়ে ব্যবহার করা যায়। Next.js স্ট্যাটিক সাইট জেনারেশন (SSG) ব্যবহার করে এই ধরনের ডেটা ফেচিং এবং রেন্ডারিং করতে সহায়ক।

getStaticProps (SSG)

getStaticProps ফাংশনটি ব্যবহার করে আপনি এমন ডেটা ফেচ করতে পারেন যা বারবার রেন্ডার করার সময় প্রয়োজন হয় না এবং পরিবর্তন হয় না। একবার ডেটা ফেচ হওয়ার পর তা স্ট্যাটিকভাবে পেজে সংরক্ষিত থাকে।

উদাহরণ:

// pages/index.js

export async function getStaticProps() {
  // API থেকে ডেটা ফেচ করা
  const res = await fetch('https://api.example.com/posts');
  const data = await res.json();

  return {
    props: { posts: data },  // পেজের প্রপ্স হিসেবে ডেটা পাঠানো
  };
}

export default function HomePage({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

স্ট্যাটিক ডেটা ব্যবস্থাপনার সুবিধা:

• পেজটি খুব দ্রুত লোড হয়, কারণ ডেটা একবার ফেচ হয়ে স্ট্যাটিকভাবে তৈরি হয়।
• সার্ভারের উপর চাপ কম থাকে, কারণ সার্ভার প্রতি রিকোয়েস্টে ডেটা ফেচ করার প্রয়োজন নেই।

সীমাবদ্ধতা:

• যদি ডেটা দ্রুত পরিবর্তিত হয়, তবে নতুন বিল্ডের প্রয়োজন হতে পারে।

২. ডাইনামিক ডেটা ব্যবস্থাপনা (Dynamic Data Management)

ডাইনামিক ডেটা ব্যবস্থাপনা মানে হল এমন ডেটা যা নিয়মিত পরিবর্তিত হয় এবং আপনাকে সর্বশেষ ডেটা দেখানোর জন্য প্রতিটি রিকোয়েস্টে নতুন করে ফেচ করতে হয়। Next.js সার্ভার সাইড রেন্ডারিং (SSR) এর মাধ্যমে এই ধরনের ডেটা ফেচ করতে পারে।

getServerSideProps (SSR)

getServerSideProps ফাংশনটি সার্ভার সাইড রেন্ডারিং (SSR) এর মাধ্যমে ডাইনামিক ডেটা ফেচ করার জন্য ব্যবহৃত হয়। এই ফাংশনটি প্রতিটি রিকোয়েস্টের জন্য ডেটা ফেচ করে এবং পেজটি সার্ভার সাইডে রেন্ডার করে।

উদাহরণ:

// pages/posts/[id].js

export async function getServerSideProps({ params }) {
  // ডাইনামিক ডেটা ফেচ করা
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },  // পেজের প্রপ্স হিসেবে ডেটা পাঠানো
  };
}

export default function PostPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

এখানে getServerSideProps ডাইনামিক রাউট পেজের জন্য ব্যবহার করা হয়েছে, যেখানে params.id ব্যবহার করে পেজের জন্য ডাইনামিক ডেটা ফেচ করা হচ্ছে। প্রতিটি রিকোয়েস্টে নতুন ডেটা ফেচ করা হবে এবং সেটি পেজে রেন্ডার করা হবে।

ডাইনামিক ডেটা ব্যবস্থাপনার সুবিধা:

• ডেটা সর্বদা আপডেটেড থাকে, কারণ প্রতিটি রিকোয়েস্টে নতুন ডেটা ফেচ করা হয়।
• ব্যবহারকারীরা সর্বশেষ ডেটা দেখতে পান।

সীমাবদ্ধতা:

• সার্ভারে অতিরিক্ত লোড হয়, কারণ প্রতিটি রিকোয়েস্টে ডেটা ফেচ করতে হয়।
• পেজ লোডের সময় একটু বেশি হতে পারে।

৩. ডাইনামিক রাউটিং এবং ডেটা ফেচিং

Next.js ডাইনামিক রাউটিং সমর্থন করে, যার মাধ্যমে আপনি URL প্যারামিটার অনুযায়ী ডেটা ফেচ করতে পারেন। আপনি getStaticPaths এবং getStaticProps একসাথে ব্যবহার করে ডাইনামিক পেজগুলোর জন্য স্ট্যাটিক ডেটা ফেচ করতে পারেন।

উদাহরণ:

// pages/posts/[id].js

export async function getStaticPaths() {
  // API থেকে ডাইনামিক পাথ সংগ্রহ
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  // ডাইনামিক পাথ রিটার্ন করা
  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // নির্দিষ্ট পোস্টের ডেটা ফেচ করা
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },  // পেজে প্রপ্স হিসেবে ডেটা পাঠানো
  };
}

export default function PostPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

এখানে, getStaticPaths ব্যবহার করে ডাইনামিক পাথের তালিকা তৈরি করা হয় এবং getStaticProps ব্যবহার করে নির্দিষ্ট পোস্টের ডেটা ফেচ করা হয়।

সারাংশ

Next.js এ স্ট্যাটিক এবং ডাইনামিক ডেটা ব্যবস্থাপনা দুটি শক্তিশালী কৌশল। আপনি getStaticProps ব্যবহার করে স্থিতিশীল এবং দ্রুত লোডিং ডেটা ম্যানেজ করতে পারেন এবং getServerSideProps ব্যবহার করে সার্ভার সাইডে ডাইনামিক ডেটা ফেচ করতে পারেন। আপনার প্রোজেক্টের চাহিদার উপর ভিত্তি করে আপনি এই দুটি পদ্ধতির মধ্যে নির্বাচন করতে পারবেন, এবং Next.js আপনাকে একটি স্কেলেবল এবং ফ্লেক্সিবল সিস্টেম প্রদান করবে।