لماذا يهم هذا الدرس؟

فهم حدود Server وClient واستخدامه بصورة صحيحة داخل مشروع App Router. تحافظ Server Components على Data Access وSecrets في الخادم، وتستخدم Client Components عند الحاجة إلى Browser State أوEvents أوAPIs. يحدد الحد حجم Bundle وما يُكشف للمتصفح.

كيف تفكر فيه؟

  • في درس حدود Server وClient، النتيجة التي يجب أن تتحقق: مرّر بيانات قابلة للتسلسل من Server Component إلى الحد التفاعلي.
  • في سياق حدود Server وClient، الخطر الذي يجب أن يبقى تحت السيطرة: إضافة use client في Layout عالية المستوى تحول Subtree كبيرة إلى Client Code وقد تدفع لنقل Server-only Concerns إلى المتصفح.
  • تطبيق حدود Server وClient: اعرض البيانات في Server Component ومرر Identifier قابلًا للتسلسل إلى Client Component تفاعلية صغيرة.
Diagram

حدود Server وClient

تطبيق عملي

في التطبيق الخاص بدرس حدود Server وClient: مرّر بيانات قابلة للتسلسل من Server Component إلى الحد التفاعلي.

product-page.tsxtsx
export default async function Page() {
  const product = await getProduct();
  return <FavoriteButton productId={product.id} />;
}

جرّب بنفسك

Practice

تمرين حدود Server وClient

اعرض البيانات في Server Component ومرر Identifier قابلًا للتسلسل إلى Client Component تفاعلية صغيرة.

  • سجل النتيجة المتوقعة قبل التنفيذ
  • اختبر حالة صحيحة وحالة فشل مرتبطة بالدرس
  • اشرح في سطرين أين يوجد الحد المسؤول عن القرار

الخلاصة