دریافت داده در کلاینت کامپوننت

اگرچه توصیه می‌شود داده‌ها را تا حد امکان در کامپوننت‌های سروری دریافت کنید، اما سناریوهای زیادی وجود دارند که نیاز به دریافت دیتای مستقیم در سمت کلاینت دارند؛ مانند پجینیشن‌های پیشرفته، فیلترهای لحظه‌ای بدون تغییر آدرس، یا ارتباط با سرویس‌هایی که نیاز به تعامل مستقیم مروگر دارند.

در کلاینت کامپوننت‌ها ('use client')، به دو روش اصلی می‌توانید داده‌ها را تامین کنید:

1. استفاده از هوک جدید ری‌اکت یعنی use API (برای استریم پرامیس از سرور)

2. استفاده از کتابخانه‌های محبوب جامعه ری‌اکت مثل SWR یا React Query

چیزهایی که در این درس یاد می‌گیرید:

• نحوه انتقال پرامیس (Promise) باز نشده از سرور به کلاینت

• خواندن داده‌های استریم‌شده به کمک هوک بومی use

• دریافت کلاینتی داده‌ها با کتابخانه SWR و مدیریت وضعیت‌های لودینگ و خطا

۱. استریم داده‌ها با استفاده از use API ری‌اکت

یک الگوی فوق‌العاده قدرتمند در ری‌اکت، ترکیب هماهنگ سرور و کلاینت بدون معطل نگه داشتن کاربر است. در این روش، شما عملیات دریافت داده را در سرور کامپوننت استارت می‌زنید، اما پشت آن از کلمه کلیدی await استفاده نمی‌کنید. در عوض، خودِ پرامیس (Promise) را به عنوان پروپ به کلاینت کامپوننت می‌فرستید!

گام اول: ساخت پرامیس در سرور کامپوننت و ارسال به کلاینت

// app/blog/page.tsx (Server Component)
import Posts from '@/app/ui/posts'
import { Suspense } from 'react'
import { getPosts } from '@/lib/data' // فرض کنید این تابع از دیتابیس یا API دیتا می‌گیرد
 
export default function Page() {
  // 🔴 مهم: پشت این تابع await نگذارید؛ ما خودِ پرامیس را می‌خواهیم
  const postsPromise = getPosts()
 
  return (
    // دور کامپوننت کلاینتی یک مرز Suspense می‌کشیم
    <Suspense fallback={<div className="animate-pulse">در حال استریم مقالات...</div>}>
      <Posts posts={postsPromise} />
    </Suspense>
  )
}

گام دوم: حل کردن (Resolve) پرامیس در کلاینت کامپوننت با use

هوک use یک ابزار بومی جدید در ری‌اکت است که می‌تواند پرامیس‌ها را مستقیماً در زمان رندر کلاینت بخواند. اگر پرامیس هنوز تکمیل نشده باشد، این هوک کامپوننت را به نزدیک‌ترین مرز <Suspense> والد واگذار می‌کند تا لودینگ نشان داده شود:

// app/ui/posts.tsx
'use client'
import { use } from 'react'
 
interface Post {
  id: string
  title: string
}

export default function Posts({ posts }: { posts: Promise<Post[]> }) {
  // هوک use پرامیس را می‌گیرد و دیتای خالص را پس از آماده شدن تحویل می‌دهد
  const allPosts = use(posts)
 
  return (
    <ul className="space-y-2">
      {allPosts.map((post) => (
        <li key={post.id} className="p-2 border rounded shadow-sm">
          {post.title}
        </li>
      ))}
    </ul>
  )
}

۲. استفاده از کتابخانه‌های اکوسیستم (Community Libraries)

اگر به قابلیت‌هایی مثل کَش کردن پیشرفته داده‌ها، به‌روزرسانی خودکار در زمان فوکوس مجدد روی صفحه (Revalidation on Focus)، یا بازخوانی دوره‌ای دیتای زنده نیاز دارید، استفاده از کتابخانه‌هایی مثل SWR یا React Query (TanStack Query) بهترین گزینه است.

در این روش، کل فرآیند درخواست شبکه و مدیریت وضعیت‌ها کاملاً در سمت مرورگر (Client-side) انجام می‌شود:

// app/blog/page.tsx
'use client' // کل این صفحه کلاینتی مدیریت می‌شود

import useSWR from 'swr'
 
// تعریف یک fetcher ساده برای تبدیل پاسخ شبکه به فرمت JSON
const fetcher = (url: string) => fetch(url).then((r) => r.json())
 
export default function BlogPage() {
  // استفاده از هوک useSWR برای مدیریت خودکار وضعیت‌ها
  const { data, error, isLoading } = useSWR(
    'https://api.vercel.app/blog',
    fetcher
  )
 
  // مدیریت وضعیت بارگذاری
  if (isLoading) return <div className="text-gray-500">در حال دریافت اطلاعات از مرورگر...</div>
  
  // مدیریت خطا در صورت بروز مشکل در شبکه یا سرور مقصد
  if (error) return <div className="text-red-500">خطایی رخ داد: {error.message}</div>
 
  return (
    <ul className="list-disc pl-5">
      {data.map((post: { id: string; title: string }) => (
        <li key={post.id} className="my-1">
          {post.title}
        </li>
      ))}
    </ul>
  )
}

خلاصه راهنمای تصمیم‌گیری (Recap)

• متد use API: زمانی عالی است که می‌خواهید لود اولیه صفحه بسیار سریع باشد و کار را با استریمِ دیتای سرور جلو ببرید. این روش نیاز به نصب هیچ پکیج اضافه‌ای ندارد و با سیستم <Suspense> کاملاً یکپارچه است.

• کتابخانه‌های SWR / TanStack Query: زمانی ایده‌آل هستند که با تعاملات پیچیده کلاینتی سروکار دارید، نیاز به سینک نگه‌داشتن مداوم دیتا با سرور دارید، یا می‌خواهید از کَش کردن‌های پیشرفته سمت مرورگر برای گشت‌وگذارهای بعدی کاربر استفاده کنید.