لماذا يهم هذا الدرس؟
فهم جلب البيانات على الخادم واستخدامه بصورة صحيحة داخل مشروع App Router. يحدد Server Data Fetching والCaching متى تُقرأ البيانات وتُعاد الاستفادة منها وتُحدث. Freshness متطلب Product وليس Default نخمنه.
كيف تفكر فيه؟
- في درس جلب البيانات على الخادم، النتيجة التي يجب أن تتحقق: حدد سياسة التحديث المناسبة للبيانات بدل افتراض أن كل مصدر يحتاج السلوك نفسه.
- في سياق جلب البيانات على الخادم، الخطر الذي يجب أن يبقى تحت السيطرة: Caching لبيانات متغيرة أوخاصة بالمستخدم دون فهم Scope قد يعيد بيانات قديمة أوغير مناسبة، وتعطيل كل Cache يهدر السعة.
- تطبيق جلب البيانات على الخادم: اجلب Resource على الخادم ووثق Freshness Requirement ثم اختر Revalidation مناسبة واختبرها.
جلب البيانات على الخادم
تطبيق عملي
في التطبيق الخاص بدرس جلب البيانات على الخادم: حدد سياسة التحديث المناسبة للبيانات بدل افتراض أن كل مصدر يحتاج السلوك نفسه.
app/posts/page.tsxtsx
export default async function PostsPage() {
const response = await fetch('https://example.com/api/posts');
if (!response.ok) throw new Error('Failed to load posts');
const posts = await response.json();
return <PostList posts={posts} />;
}جرّب بنفسك
تمرين جلب البيانات على الخادم
اجلب Resource على الخادم ووثق Freshness Requirement ثم اختر Revalidation مناسبة واختبرها.
- سجل النتيجة المتوقعة قبل التنفيذ
- اختبر حالة صحيحة وحالة فشل مرتبطة بالدرس
- اشرح في سطرين أين يوجد الحد المسؤول عن القرار