واکشی داده در نکست جی اس چگونه انجام میشود؟

1. واکشی داده Fetching Data

  واکشی در سرور کامپوننتها  Server Components:

•       با fetch()

•       با ORM یا پایگاه‌داده

واکشی کلاینت کامپوننتها    Client Components:

•       با use() + Suspense

•       با کتابخانه‌هایی مانند SWR / ری‌اکت کوئری

2. Deduplicate و Cache Requests

3.استریمینگ Streaming (پخش تدریجی داده‌ها):

•     با فایل loading.js

•     با <Suspense>

4. ساخت States بارگذاری معنادار

5. مثال‌های کاربردی:

•     Sequential data fetching

•     Parallel data fetching

•     Preloading data

6. Patterns & بهترین روش‌ها

 🧭 خلاصه کلی

در App Router نسخه‌های جدید نکست جی اس، داده‌ها عمدتاً در سرور کامپوننتها بارگیری می‌شوند. شما می‌توانید از fetchیا تراکنش مستقیم با پایگاه‌داده (مثل ORM) برای گرفتن داده استفاده کنید. درخواست‌ها به‌صورت خودکار memoize می‌شوند تا تکرارهای یکسان در یک render حذف شوند.

برای کلاینت کامپوننتها ، می‌توانید از ری‌اکت use در کنار <Suspense> برای استریم داده استفاده کنید، یا اگر نیاز به fetch سمت کلاینت دارید از کتابخانه‌هایی مانند SWR یا ری‌اکت کوئری کمک بگیرید.

برای رندرینگ پایگاه‌داده یا API، دو الگوی موازی و متوالی وجود دارد که در موازی سرعت بیشتری دارد (با Promise.all). همچنین امکان preload کردن داده برای کاهش تاخیر وجود دارد.

برای تجربه بهتر تجربه کاربری، می‌توانید از loading.js یا کامپوننت‌های <Suspense> برای نشان دادن وضعیت بارگذاری استفاده کنید.

1.واکشی داده در کامپوننتهای سروری Server Components

 الف. استفاده از fetch()

 کامپوننت را به صورت async function تعریف کنید، await fetch(...) کنید، سپس await res.json() تا داده را پردازش کنید.

 گزینه‌های fetch مثل { cache: 'no-store' } یا { cache: 'force-cache' } کنترل cache را در نکست جی اس فعال می‌کنند.

 در حالت توسعه، پیش‌فرض auto cache است که در build نهایی statically prerender خواهد شد .

 ب. استفاده از ORM یا پایگاه‌داده

 از داخل کامپوننت سرور می‌توانید مستقیم با پایگاه‌داده کار کنید، بدون نیاز به API میانی.

 مثلاً کد زیر:

  ````ts

  import { db, posts } from '@/lib/db'

  export default async function Page() {

    const allPosts = await db.select().from(posts)

    …

  }

  ``` :contentReference[oaicite:21]{index=21}.

  ````

 2.واکشی داده در کامپوننتهای کلاینتی Client Components

 الف. استریم با use() و Suspense

 در کامپوننت سرور، promise داده را پاس دهید:

  ```tsx

  const posts = getPosts();

  <Suspense fallback={<div>Loading...</div>}>

    <Posts posts={posts} />

  </Suspense>

  ```

 در کامپوننت کلاینتی:

  ````tsx

  'use client'

  import { use } from 'react'

  export default function Posts({ posts }: { posts: Promise<Post[]> }) {

    const allPosts = use(posts);

    …render…

  }

  ``` :contentReference[oaicite:24]{index=24}.

  ````

توضیحات مربوط به هوک یوز را در ری اکت میتوانید بخوانید:

https://react.dev/reference/react/use

 ب. استفاده از کتابخانه‌های SWR یا ری‌اکت کوئری

 در کلاینت کامپوننت میتوانید از useSWR استفاده کرده و وضعیت loading, error, data را مدیریت کنید.

 3. Deduplicate Requests و Cache

 نکست جی اس به‌صورت خودکار درخواست‌های fetch‌ مشابه GET/HEAD را در یک render به‌طور خودکار ادغام می‌کند.

 گزینه‌های cache مانند cache: 'force-cache' یا cache: 'no-store' قابل تنظیم هستند.

 اگر از ORM استفاده می‌کنید، می‌توانید با تابع cache() از ری‌اکت داده‌ها را cache کنید ([Next.js][1]).

 4. Streaming: بارگذاری تدریجی

 الف. با فایل loading.js

ابتدادرباره Streaming صحبت کنیم (استریمینگ = جریان‌یابی / پخش تدریجی داده‌ها).

استریمینگ یعنی بارگذاری تدریجی داده‌ها به جای انتظار برای کامل‌شدن همه چیز.

به کمک <Suspense> یا فایل loading.tsx، بخش‌هایی از صفحه سریع‌تر نمایش داده می‌شوند و بقیه با کمی تأخیر، تدریجاً ظاهر می‌شوند.

مزیت: تجربه کاربری سریع‌تر و بهتر.

 داخل همان پوشه page، فایل loading.tsx ایجاد کنید. قالب بارگذاری را در آن مشخص کنید.

 هنگام ناوبری، layout نمایش داده می‌شود و سپس داده‌ها استریم می‌شوند.

 ب. با <Suspense>

 برای بخش‌هایی از صفحه که نیاز به داده دارند، از <Suspense> استفاده کنید و UI fallback معنادار بدهید، مثل skeleton یا spinner.

 5. طراحی States بارگذاری معنادار

 از UI هایی مانند skeletons، spinners یا حتی عناصر جزئی مثل عنوان، عکس استفاده کنید که نشان دهند محتوای اصلی درحال بارگذاری است .

 6. مثال‌های عملی

 الف.واکشی صفی (ترتیبی یا دنباله ای) Sequential Fetching

وقتی شما داده‌ها را مرحله‌به‌مرحله و پشت‌سر‌هم واکشی می‌کنید. یعنی:

ابتدا getArtist() را اجرا کن،

وقتی تمام شد، getAlbums() را اجرا کن.

مشکل این روش: کندتر است چون مرحله دوم منتظر مرحله اول می‌ماند.

 پس به صورت خلاصه واکشی صفی یعنی وقتی کامپوننت‌هایی تو‌در‌تو داده را فچ یا واکشی می‌کنند و هر مرحله منتظر مرحله قبل است.

 مثال:ابتدا <Artist> => پس از آن <Playlists> شروع به fetch کند و باعث تاخیر شود .

 ب.واکشی موازی Parallel Fetching

 همه‌ی درخواست‌های داده را هم‌زمان می‌فرستید و با Promise.all() منتظر می‌مانید تا همه‌ی آن‌ها کامل شوند. درخواست‌ها را همزمان شروع کنید:

  ```ts

  const artistPromise = getArtist()

  const albumsPromise = getAlbums()

  const [artist, albums] = await Promise.all([artistPromise, albumsPromise])

  ```

 معمولا سرعت بیشتری دارد .

 ج.پیش بارگذاری داده Preloading Data

 با تعریف توابع cache یا preload() داده را از قبل بارگذاری کنید تا تاخیر کمتر شود.

 7.بهترین روشها و الگوها Patterns و Best Practices

•  ترجیح داده می‌شود داده‌ها در سرورکامپوننتها fetch شوند تا امنیت، SEO و عملکرد بهتری داشته باشید.

•  داده را در همان کامپوننتی که نیاز دارد دریافت کنید (fetch close to usage), نه در لایه بالا و انتقال داده بین props.

•  Streaming و Suspense را برای تجربه کاربری بهتر استفاده کنید.

•  درخواست‌های وابسته را موازی‌سازی کنید یا وقتی وابسته‌اند صریح بنویسید.

•  داده‌های حساس مثل کلید API در سمت کلاینت fetch نشوند .

https://nextjs.org/docs/app/getting-started/fetching-data

https://nextjs.org/docs/app/api-reference/functions/fetch

https://nextjs.org/docs/14/app/building-your-application/data-fetching/patterns