Next.js و استفاده از Pages Router: دریافت داده‌ها به صورت کلاینت ساید

وقتی صحبت از پروژه‌های وب بزرگ و چند صفحه‌ای می‌کنیم، به کارگیری روش‌های مختلف دریافت داده بسیار اهمیت پیدا می‌کند. یکی از این روش‌ها، دریافت داده به صورت کلاینت ساید در فریم‌ورک قدرتمند Next.js است. چرا این موضوع مهم است؟ خب، به طور خلاصه، دریافت داده به صورت کلاینت ساید به شما اجازه می‌دهد تا درخواست‌های HTTP خود را مستقیماً از طریق مرورگر کاربر انجام دهید و محتوای صفحات را بر اساس نتایج به دست آمده به روز کنید.

یکی از مزایای کلیدی این روش این است که در زمان نیاز، بدون بارگذاری مجدد صفحه، می‌توان اطلاعات جدید را به کاربر نمایش داد. این کار تجربه کاربری را بهبود می‌بخشد زیرا از بارگذاری مجدد غیرضروری جلوگیری می‌کند. علاوه بر این، با استفاده از تکنیک‌های مناسب کَشینگ می‌توانید عملکرد بهتری از برنامه خود به دست آورید.

خب، بیایید نگاهی به چگونگی پیاده‌سازی این تکنیک در Next.js بیندازیم. اول از همه، یکی از ابزارهای مهم برای این کار، hook معروف useEffect است که به شما اجازه می‌دهد رویدادهای خاصی را در طول چرخه حیات کامپوننت تحت نظر بگیرید. با استفاده از این هوک، می‌توانیم به راحتی یک درخواست HTTP ارسال کنیم و محتوای صفحاتمان را به‌روز کنیم.

در کدنویسی Next.js، توجه داشته باشید که از توابع غیرهمزمان (async) و ساختار try/catch استفاده کنید تا مطمئن شوید درخواست‌های شما به درستی انجام شده و خطاها به درستی مدیریت می‌شوند. به این صورت، ساختار کد شما پاک‌تر و قابل نگهداری‌تر خواهد بود.

import { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return 
Loading...
;
  if (!data) return 
No data available
;

  return (
    

      
Data Retrieved:
      
{JSON.stringify(data, null, 2)}
    
  );
}

توضیحات خط به خط کد:
- useState و useEffect در آغاز فایل وارد می‌شوند، که برای مدیریت وضعیت حالت و اجرای موثر در زمان تغییر وضعیت استفاده می‌شوند.
- یک کامپوننت به نام MyComponent تعریف می‌شود که دو حالت اولیه دارد: data و loading.
- useEffect برای اجرای تابع fetchData زمانی که کامپوننت بارگذاری می‌شود استفاده می‌شود.
- fetchData یک تابع غیرهمزمان است که یک درخواست به https://api.example.com/data ارسال می‌کند و داده را از پاسخ به‌دست آمده استخراج و به data تنظیم می‌کند.
- در صورت بروز خطا، به کنسول خطا چاپ می‌شود و وضعیت loading به حالت false تغییر می‌یابد.
- تا زمانی که loading برقرار است، متن "Loading..." نمایش داده می‌شود. اگر داده‌ای موجود نباشد، "No data available" نشان داده می‌شود. در نهایت، داده‌ها به صورت خوانا در قالب JSON نمایش داده می‌شوند.