في App Router تجلب البيانات مباشرة داخل Server Components غير المتزامنة باستخدام fetch API القياسي — بدون getServerSideProps، بدون useEffect، بدون طبقة بيانات منفصلة. يوسع Next.js fetch بتحكم التخزين المؤقت.
// app/posts/page.tsx — a Server Component
export default async function Posts() {
const res = await fetch("https://api.example.com/posts"); // runs on the server
const posts = await res.json();
return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}
لأن المكون يعمل على الخادم، تقوم ببساطة بـ await بيانات الاستدعاء واستخدامها — أبسط بكثير من رقصة useEffect + useState + حالة التحميل على جانب العميل.
يعزز Next.js fetch بحيث يختار كل استدعاء سلوك العرض الخاص به:
fetch(url, { cache: "force-cache" }); // SSG — cached (default for static)
fetch(url, { cache: "no-store" }); // SSR — fresh every request
fetch(url, { next: { revalidate: 60 } }); // ISR — revalidate every 60s
fetch(url, { next: { tags: ["posts"] } }); // tag for on-demand revalidation
هذا هو النموذج الموحد لـ App Router: بدلاً من اختيار استراتيجية على مستوى الصفحة، تتحكم في التخزين المؤقت على مستوى جلب البيانات.
// ❌ sequential — each awaits the previous (slow waterfall)
const user = await getUser();
const posts = await getPosts();
// ✅ parallel — both start at once
const [user, posts] = await Promise.all([getUser(), getPosts()]);
شغّل الطلبات المستقلة معاً باستخدام Promise.all حتى لا تعطل بعضها بعضاً.
"use client";
// for client-side data (e.g. after interaction), use a library like SWR or React Query
const { data } = useSWR("/api/user", fetcher);
Server Components تغطي معظم الاحتياجات؛ استخدم SWR/React Query للبيانات على جانب العميل والتفاعلية والتي تحتاج للتحقق بشكل متكرر.
يقوم Next.js تلقائياً بـ إزالة التكرار من استدعاءات fetch المتطابقة في عملية عرض واحدة — لذا يمكنك جلب نفس البيانات في تخطيط وصفحة دون طلب مزدوج.
جلب البيانات غير المتزامن المباشر في Server Components هو أحد أكبر التبسيطات في App Router — لا يوجد boilerplate، وصول آمن على جانب الخادم، إلغاء تكرار تلقائي، وتخزين مؤقت لكل جلب يعمل أيضاً كخيار SSG/SSR/ISR الخاص بك.
معرفة متى يجب جعل الجلب المستقل متوازياً (تجنب الانتظار المتسلسل) هي ممارسة الأداء الرئيسية.