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

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

كيف تفكر فيه؟

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

تطبيق عملي

في التطبيق الخاص بدرس Client Components: ضع use client عند أصغر حد تفاعلي بدل تحويل الصفحة كاملة إلى Client Component.

counter.tsxtsx
'use client';
import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

جرّب بنفسك

Practice

تمرين Client Components

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

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

الخلاصة