اگرچه توصیه میشود دادهها را تا حد امکان در کامپوننتهای سروری دریافت کنید، اما سناریوهای زیادی وجود دارند که نیاز به دریافت دیتای مستقیم در سمت کلاینت دارند؛ مانند پجینیشنهای پیشرفته، فیلترهای لحظهای بدون تغییر آدرس، یا ارتباط با سرویسهایی که نیاز به تعامل مستقیم مروگر دارند.
در کلاینت کامپوننتها ('use client')، به دو روش اصلی میتوانید دادهها را تامین کنید:
استفاده از هوک جدید ریاکت یعنی use API (برای استریم پرامیس از سرور)
استفاده از کتابخانههای محبوب جامعه ریاکت مثل 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>
)
}
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>
)
}
اگر به قابلیتهایی مثل کَش کردن پیشرفته دادهها، بهروزرسانی خودکار در زمان فوکوس مجدد روی صفحه (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>
)
}
متد use API: زمانی عالی است که میخواهید لود اولیه صفحه بسیار سریع باشد و کار را با استریمِ دیتای سرور جلو ببرید. این روش نیاز به نصب هیچ پکیج اضافهای ندارد و با سیستم <Suspense> کاملاً یکپارچه است.
کتابخانههای SWR / TanStack Query: زمانی ایدهآل هستند که با تعاملات پیچیده کلاینتی سروکار دارید، نیاز به سینک نگهداشتن مداوم دیتا با سرور دارید، یا میخواهید از کَش کردنهای پیشرفته سمت مرورگر برای گشتوگذارهای بعدی کاربر استفاده کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://nextjs.org/docs/app