مكوّنات الخادم ومكوّنات العميل
تعرّف على React Server Components، ومتى تضيف التوجيه 'use client'، وكيف تدمج HTML المعروض على الخادم مع جزر العميل التفاعلية
مكوّنات الخادم ومكوّنات العميل درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
عالمان في تطبيق واحد
تتيح React Server Components تقسيم شجرة المكوّنات بين أجزاء تُصيَّر على الخادم وأجزاء تفاعلية على العميل. في App Router الخاص بـ Next.js، تكون المكوّنات مكوّنات خادم افتراضيًا؛ ويمكن اختيار مكوّنات العميل باستخدام 'use client'.
ما الذي تفعله مكوّنات الخادم
تعمل مكوّنات الخادم على الخادم فقط. ويمكنها: جلب البيانات مباشرةً، والوصول إلى نظام الملفات، واستخدام الأسرار الخاصة بالخادم، وتصيير HTML من دون إرسال React إلى العميل. ولا يمكنها: استخدام hooks، أو إدارة الحالة، أو معالجة الأحداث.
ما الذي تفعله مكوّنات العميل
تعمل مكوّنات العميل على الخادم من أجل SSR (HTML الأولي)، وعلى العميل من أجل التفاعلية. ويمكنها استخدام useState وuseEffect ومعالجات الأحداث وواجهات برمجة التطبيقات الخاصة بالمتصفح.
الافتراضي هو الخادم
في App Router الخاص بـ Next.js، تكون كل مكوّنات الخادم مكوّنات خادم افتراضيًا. وهذا أمر رائع — إذ إن معظم تطبيقك يعتمد على التصيير الثابت.
// app/posts/page.tsx — Server Component by default
export default async function Posts() {
const posts = await fetch('https://api/posts').then(r => r.json());
return (
<ul>
{posts.map(p => <li key={p.id}>{p.title}</li>)}
</ul>
);
}اختيار العميل صراحةً
أضف 'use client' إلى أعلى الملف لتحديد مكوّناته (والواردات الخاصة بها) بوصفها مكوّنات عميل.
// app/Counter.tsx
'use client';
import { useState } from 'react';
export default function Counter() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}تركيب مكوّنات الخادم والعميل
يمكن لمكوّنات الخادم تصيير مكوّنات العميل، لكن لا يمكن لمكوّنات العميل استيراد مكوّنات الخادم. مرّر المحتوى المُصيَّر على الخادم إلى أغلفة العميل بوصفه children.
// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';
export default function Home() {
return (
<ClientShell>
<ServerWidget />
</ClientShell>
);
}أهمية هذا النمط
حزم JavaScript أصغر — لا تُرسَل إلى المتصفح إلا مكوّنات العميل. الوصول المباشر إلى قاعدة البيانات أو الملفات — لا حاجة إلى طبقة API للبيانات المخصّصة للقراءة فقط. تحسين SEO وتسريع LCP — يصل HTML مُصيَّرًا بالكامل.
قواعد حدود العميل
بمجرد تحديد ملف باستخدام 'use client'، تصبح جميع المكوّنات الموجودة فيه وأي مكوّنات فرعية مستوردة مكوّنات عميل. يحدّد 'use client' حدًا فاصلًا بين الخادم والعميل.
إجراءات الخادم
تعمل الدوال المحدّدة باستخدام 'use server' على الخادم فقط، لكن يمكن استدعاؤها من مكوّنات العميل — مثل RPC. وغالبًا ما تُستخدم لإرسال النماذج وعمليات التعديل.
// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';
export async function createPost(formData: FormData) {
const title = formData.get('title') as string;
await db.posts.create({ data: { title } });
revalidatePath('/posts');
}
// In a Client form component:
<form action={createPost}>
<input name="title" />
<button>Create</button>
</form>تمرير الخصائص من الخادم إلى العميل
يجب أن تكون الخصائص التي تُمرَّر من الخادم إلى العميل قابلة للتسلسل بصيغة JSON — لا دوال أو أصناف أو كائنات Dates ذات بنى مخصّصة. حوّلها قبل تمريرها.
تمييز كل نوع
افحص الواردات: تجبر useState وuseEffect ومعالجات onClick المكوّن على أن يكون مكوّن عميل. ويمكن أن يبقى عرض البيانات البحت مكوّن خادم.
مكاسب الأداء
تقلّص مكوّنات الخادم حزمة JavaScript بدرجة كبيرة. فالصفحة التي تحتوي غالبًا على محتوى ثابت مع بعض الأدوات التفاعلية ترسل JavaScript الخاص بالأجزاء التفاعلية فقط — وقد تكون أصغر بنسبة 90% أحيانًا.
تحقق سريع
ما React hook غير المسموح باستخدامه في مكوّن خادم في Next.js؟
مراجعة: الخادم مقابل العميل
مكوّنات الخادم: تعمل على الخادم فقط، وتدعم async/await، ولا تدعم hooks أو الحالة أو معالجات الأحداث، وتنتج حزمًا أصغر. مكوّنات العميل: يُختار استخدامها باستخدام 'use client'، وتوفّر التفاعلية عبر useState وuseEffect والأحداث. يمكن للخادم تصيير العميل، لكن لا يمكن للعميل استيراد الخادم (ومع ذلك يمكنه تلقّيه عبر children). تُستخدم إجراءات الخادم ('use server') لعمليات التعديل بأسلوب RPC.
الأسئلة الشائعة
هل درس «مكوّنات الخادم ومكوّنات العميل» مجاني؟
نعم — نص درس «مكوّنات الخادم ومكوّنات العميل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «مكوّنات الخادم ومكوّنات العميل»؟
تعرّف على React Server Components، ومتى تضيف التوجيه 'use client'، وكيف تدمج HTML المعروض على الخادم مع جزر العميل التفاعلية تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «مكوّنات الخادم ومكوّنات العميل»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- موجّه Pages مقابل موجّه App
- مكوّنات الخادم ومكوّنات العميل
- SSG وSSR وISR
- مسارات API والبرمجيات الوسيطة في Next.js