متى وكيف تستخدم Client Components؟

Question

Accepted Answer

**Client Component** يعمل في المتصفح (ويتم أيضًا عرضه مسبقًا على الخادم للـ HTML الأولي). يمكنك تفعيله باستخدام التوجيه **`"use client"`** في أعلى الملف. تحتاجه كلما احتجت إلى التفاعل (interactivity) أو الحالة (state) أو التأثيرات (effects) أو واجهات برمجة تطبيقات المتصفح. ## إعلان واحد ```tsx "use client"; // MUST be the first line of the file import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); // ✅ hooks work here return ; // ✅ events } ``` ## عندما تحتاج إلى Client Component ```text ✓ useState / useReducer / useEffect / useRef / useContext ✓ Event handlers (onClick, onChange, onSubmit) ✓ Browser APIs (window, localStorage, navigator, IntersectionObserver) ✓ Third-party libraries that use any of the above (most UI/animation libs) ``` ## التوجيه ينتشر إلى العناصر الفرعية وضع علامة على ملف `"use client"` يجعله و**كل شيء يستورده** جزءًا من حزمة client. لذا تريد أن تكون حدود client **صغيرة وسفلى في الشجرة** — "جزر client" — بدلاً من وضع علامة على layout على مستوى المشروع (مما قد يسحب التطبيق بأكمله إلى حزمة المتصفح). ```tsx // ✅ Good: server page, small client island only where needed export default async function Page() { // Server Component const data = await getData(); return <>; // island is "use client" } ``` ## نقل البيانات من الخادم إلى العميل ```tsx // Server Component fetches, passes serializable props down to the client island ``` الخصائص (Props) التي يتم تمريرها من Server Component إلى Client Component يجب أن تكون **قابلة للتسلسل** (بدون دوال، بدون نسخ من الفئات) لأنها تعبر حدود server→client. ## لماذا هذا مهم Client Components هي الطريقة التي تضيف بها التفاعل في تطبيق يركز على الخادم. المهارة هي إبقاؤها بحد أدنى وفي الأوراق — التفاعل حيث يكون مطلوبًا، Server Components في كل مكان آخر — حتى تشحن أقل JavaScript. وضع `"use client"` في مكان عالي من الشجرة هو خطأ شائع يؤدي إلى تضخيم الحزمة وفقدان فوائد Server Components.