لماذا يهم هذا الدرس؟
فهم Server Components واستخدامه بصورة صحيحة داخل مشروع App Router. تحافظ Server Components على Data Access وSecrets في الخادم، وتستخدم Client Components عند الحاجة إلى Browser State أوEvents أوAPIs. يحدد الحد حجم Bundle وما يُكشف للمتصفح.
كيف تفكر فيه؟
- في درس Server Components، النتيجة التي يجب أن تتحقق: احتفظ بجلب البيانات والأسرار على الخادم عندما لا تحتاج تفاعل المتصفح.
- في سياق Server Components، الخطر الذي يجب أن يبقى تحت السيطرة: إضافة use client في Layout عالية المستوى تحول Subtree كبيرة إلى Client Code وقد تدفع لنقل Server-only Concerns إلى المتصفح.
- تطبيق Server Components: اعرض البيانات في Server Component ومرر Identifier قابلًا للتسلسل إلى Client Component تفاعلية صغيرة.
تطبيق عملي
في التطبيق الخاص بدرس Server Components: احتفظ بجلب البيانات والأسرار على الخادم عندما لا تحتاج تفاعل المتصفح.
app/users/page.tsxtsx
export default async function UsersPage() {
const users = await getUsers();
return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}جرّب بنفسك
تمرين Server Components
اعرض البيانات في Server Component ومرر Identifier قابلًا للتسلسل إلى Client Component تفاعلية صغيرة.
- سجل النتيجة المتوقعة قبل التنفيذ
- اختبر حالة صحيحة وحالة فشل مرتبطة بالدرس
- اشرح في سطرين أين يوجد الحد المسؤول عن القرار