Next.js: جلب البيانات: fetch و RSC

// app/dashboard/page.tsx
export default async function DashboardPage() {
  const [users, projects, tasks, logs, notifs] = await Promise.all([
    fetch('https://api.example.com/stats/users', { next: { revalidate: 60 } }),
    fetch('https://api.example.com/stats/projects', { next: { revalidate: 60 } }),
    fetch('https://api.example.com/stats/tasks', { next: { revalidate: 30 } }),
    fetch('https://api.example.com/activity/logs', { cache: 'no-store' }),
    fetch('https://api.example.com/notifications', { next: { revalidate: 10 } }),
  ]).then(responses => Promise.all(responses.map(r => r.json())))

  return <DashboardView {...{ users, projects, tasks, logs, notifs }} />
}

// app/products/page.tsx — force-cache افتراضي
export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json())
  // يُسترد مرة واحدة أثناء البناء، ويُستخدم التخزين المؤقت بعد ذلك
  return <ProductList data={products} />
}

// app/profile/page.tsx — استرداد أحدث البيانات مع كل طلب
export default async function ProfilePage() {
  const user = await fetch('https://api.example.com/me', {
    cache: 'no-store',
    headers: { Authorization: `Bearer ${process.env.API_TOKEN}` }
  }).then(r => r.json())
  return <ProfileView user={user} />
}

// app/blog/[slug]/page.tsx — تخزين مؤقت بنمط ISR
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://cms.example.com/posts/${params.slug}`, {
    next: { revalidate: 3600 }  // استخدام التخزين المؤقت لمدة ساعة واحدة
  }).then(r => r.json())
  return <article><h1>{post.title}</h1><div>{post.content}</div></article>
}

يجلب البيانات ويُصيّر النتيجة.

// app/cache-demo/page.tsx
export default async function CacheDemoPage() {
  const staticData = await fetch('http://worldtimeapi.org/api/timezone/Etc/UTC', {
    cache: 'force-cache'
  }).then(r => r.json())

  const liveData = await fetch('http://worldtimeapi.org/api/timezone/Etc/UTC', {
    cache: 'no-store'
  }).then(r => r.json())

  return (
    <div>
      <p>ثابت (force-cache): {staticData.datetime}</p>
      <p>مباشر (no-store): {liveData.datetime}</p>
    </div>
  )
}

ثابت (force-cache): 2026-07-06T10:00:00.000Z  ← دائمًا نفس القيمة
مباشر (no-store): 2026-07-06T10:00:05.123Z       ← يتغير مع كل تحديث

المتصفح يُصيّر طابعين زمنيين:
  ثابت (force-cache): 2026-07-06T10:00:00.000Z  ← دائمًا نفس القيمة (مخزنة مؤقتًا عند البناء)
  مباشر (no-store): 2026-07-06T10:00:05.123Z       ← يتغير مع كل تحديث

// app/tasks/data.ts — دوال استرجاع البيانات
export async function getTasks() {
  return fetch('https://api.example.com/tasks', {
    next: { tags: ['tasks'] }
  }).then(r => r.json())
}

// app/tasks/actions.ts — Server Action: تحديث التخزين المؤقت بعد الكتابة
'use server'
import { revalidateTag } from 'next/cache'

export async function createTask(formData: FormData) {
  const title = formData.get('title') as string
  await fetch('https://api.example.com/tasks', {
    method: 'POST',
    body: JSON.stringify({ title, status: 'todo' })
  })
  revalidateTag('tasks')  // مسح جميع مدخلات التخزين المؤقت لهذا الوسم
}

يجلب البيانات ويُصيّر النتيجة.

// app/actions.ts
'use server'
import { revalidatePath } from 'next/cache'

export async function publishArticle() {
  await db.article.update({ where: { id: 1 }, data: { published: true } })
  revalidatePath('/blog')       // تحديث صفحة /blog
  revalidatePath('/blog/[slug]') // تحديث جميع تفاصيل المقالات
}

يُصيّر واجهة مكون publishArticle.

// app/waterfall/page.tsx — ❌ شلال تسلسلي
export default async function WaterfallPage() {
  const user = await fetch('https://api.example.com/user').then(r => r.json())          // 1s
  const tasks = await fetch(`https://api.example.com/tasks?userId=${user.id}`).then(r => r.json())  // انتظار حتى الانتهاء + 2s = 3s
  const details = await Promise.all(tasks.map(t =>
    fetch(`https://api.example.com/tasks/${t.id}/details`).then(r => r.json())  // انتظار حتى الانتهاء + 2s = 5s
  ))

  return <div>الإجمالي: ~5s</div>
}

يجلب البيانات ويُصيّر قائمة من العناصر.
النص المرئي: الإجمالي: ~5s

تُصيّر الصفحة كما هو موصوف أعلاه، مع تحديث واجهة المستخدم بناءً على السلوك الموصوف.

// app/no-waterfall/page.tsx — ✅ تحسين متوازي
export default async function NoWaterfallPage() {
  // المرحلة 1: استرجاع المستخدمين والبيانات الأولية بشكل متزامن
  const [user, initialData] = await Promise.all([
    fetch('https://api.example.com/user', { next: { revalidate: 10 } }).then(r => r.json()),
    fetch('https://api.example.com/initial', { cache: 'no-store' }).then(r => r.json()),
  ])

  // المرحلة 2: طلب يعتمد على user.id (لا يزال هناك شلال صغير، لكنه أفضل ما يمكن)
  const tasks = await fetch(`https://api.example.com/tasks?userId=${user.id}`).then(r => r.json())

  return <div>الإجمالي: ~2s (1s + 1s متوازي، ثم 1s)</div>
}

يجلب البيانات ويُصيّر النتيجة.
النص المرئي: الإجمالي: ~2s (1s + 1s متوازي، ثم 1s)

تُصيّر الصفحة كما هو موصوف أعلاه، مع تحديث واجهة المستخدم بناءً على السلوك الموصوف.

// app/suspense-demo/page.tsx — كل منطقة منفصلة تستخدم تغليف Suspense
import { Suspense } from 'react'

export default function SuspenseDemoPage() {
  return (
    <div>
      <h1>لوحة التحكم</h1>
      <Suspense fallback={<div>جاري تحميل الملف الشخصي...</div>}>
        <ProfileSection />
      </Suspense>
      <Suspense fallback={<div>جاري تحميل المهام...</div>}>
        <TaskSection />
      </Suspense>
    </div>
  )
}

async function ProfileSection() {
  const user = await fetch('https://api.example.com/user', { cache: 'no-store' }).then(r => r.json())
  return <div>مرحبًا، {user.name}</div>
}

async function TaskSection() {
  const tasks = await fetch('https://api.example.com/tasks', { next: { revalidate: 30 } }).then(r => r.json())
  return <ul>{tasks.map((t: any) => <li key={t.id}>{t.title}</li>)}</ul>
}

يُصيّر هيكلًا ثابتًا فورًا، مع تحميل المحتوى الديناميكي داخل حدود Suspense.
المحتوى الاحتياطي: جاري تحميل الملف الشخصي...
النص المرئي: لوحة التحكم | جاري تحميل الملف الشخصي... | }> | جاري تحميل المهام...

// app/dashboard-optimized/page.tsx
import { Suspense } from 'react'
import { revalidateTag } from 'next/cache'

// ======== دوال البيانات ========
const API = 'https://jsonplaceholder.typicode.com'

async function getData<T>(endpoint: string, options?: RequestInit): Promise<T> {
  const res = await fetch(`${API}${endpoint}`, {
    ...options,
    next: { tags: [endpoint.split('/')[1] ?? 'default'], ...(options as any)?.next },
  })
  if (!res.ok) throw new Error(`فشل في جلب ${endpoint}`)
  return res.json()
}

// ======== استرجاع جميع البيانات بشكل متوازي ========
export default function DashboardOptimizedPage() {
  return (
    <div>
      <h1>لوحة تحكم محسّنة</h1>
      <div style={{ display: 'grid', gap: 16, gridTemplateColumns: '1fr 1fr' }}>
        <Suspense fallback={<Skeleton label="المستخدمين" />}>
          <DataCard title="المستخدمين" endpoint="/users" />
        </Suspense>
        <Suspense fallback={<Skeleton label="المنشورات" />}>
          <DataCard title="المنشورات" endpoint="/posts" revalidate={120} />
        </Suspense>
        <Suspense fallback={<Skeleton label="التعليقات" />}>
          <DataCard title="التعليقات" endpoint="/comments" />
        </Suspense>
        <Suspense fallback={<Skeleton label="المهام" />}>
          <DataCard title="المهام" endpoint="/todos" revalidate={30} />
        </Suspense>
      </div>
    </div>
  )
}

async function DataCard({ title, endpoint, revalidate }: {
  title: string
  endpoint: string
  revalidate?: number
}) {
  const data = await getData<any[]>(endpoint, revalidate
    ? { next: { revalidate } }
    : { cache: 'no-store' }
  )
  return (
    <div style={{ border: '1px solid #ddd', borderRadius: 8, padding: 16 }}>
      <h2>{title} <span style={{ fontSize: 14, color: '#666' }}>({data.length})</span></h2>
      <ul>{data.slice(0, 5).map((item: any) => (
        <li key={item.id}>{item.title ?? item.name ?? item.email}</li>
      ))}</ul>
    </div>
  )
}

function Skeleton({ label }: { label: string }) {
  return <div style={{ border: '1px solid #eee', borderRadius: 8, padding: 16, opacity: 0.5 }}>
    جاري تحميل {label}...
  </div>
}

// app/dashboard-optimized/actions.ts
'use server'
import { revalidateTag } from 'next/cache'

export async function refreshSection(tag: string) {
  revalidateTag(tag)
  return { success: true }
}