مكوّنات الخادم مقابل مكوّنات العميل في Next.js
حدّد متى تضيف 'use client' وكيفية تركيب شجرتَي الخادم والعميل.
مكوّنات الخادم مقابل مكوّنات العميل في Next.js درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.
الافتراضي: مكوّنات الخادم
في App Router، تكون جميع المكوّنات مكوّنات خادم افتراضيًا. إذ تُعرض على الخادم، ولا تتضمن أي JavaScript على جهة العميل، ويمكنها الوصول مباشرةً إلى قواعد البيانات ومتغيرات البيئة ونظام الملفات.
اختيار مكوّنات العميل
أضف 'use client' في أعلى الملف لتحويله إلى مكوّن عميل. وتصبح جميع الاستيرادات التابعة له على جهة العميل أيضًا، إذ ينشئ ذلك حدًا فاصلًا للعميل.
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}ما الذي يمكن لمكوّنات الخادم فعله
يمكن لمكوّنات الخادم انتظار عمليات جلب البيانات باستخدام await ضمن السطر نفسه، وقراءة متغيرات البيئة، والوصول إلى نظام الملفات، واستيراد حزم كبيرة مخصصة للخادم فقط دون زيادة حجم حزمة العميل.
// app/products/page.tsx — Server Component
export default async function ProductsPage() {
const products = await db.query('SELECT * FROM products');
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}ما الذي لا يمكن لمكوّنات الخادم فعله
لا يمكن لمكوّنات الخادم استخدام الخطافات مثل useState وuseEffect، أو واجهات برمجة المتصفح، أو معالجات الأحداث. وتتطلب هذه العناصر 'use client'.
تكوين مكوّنات الخادم والعميل
مرّر ناتج مكوّن الخادم إلى مكوّنات العميل ضمن الخصائص أو children. والنمط الأفضل هو إبقاء جلب البيانات في مكوّنات الخادم، والتفاعلية في مكوّنات العميل.
// Server Component (no 'use client')
async function ProductPage({ id }) {
const product = await getProduct(id); // direct DB call
return <AddToCartButton product={product} />; // client component
}
// Client Component
'use client';
function AddToCartButton({ product }) {
const [added, setAdded] = useState(false);
return <button onClick={() => { addToCart(product); setAdded(true); }}>{added ? 'Added!' : 'Add to cart'}</button>;
}تمرير الأبناء من الخادم إلى العميل
يمكن لمكوّن الخادم تمرير JSX إلى مكوّن العميل بوصفه children. ويظل الأبناء معروضين على الخادم، بينما يضيف غلاف العميل التفاعلية.
// Client wrapper — Modal with open/close state
'use client';
function Modal({ children }) {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
{open && <dialog>{children}</dialog>}
</>
);
}
// Server Component — passes server-fetched content into client modal
async function Page() {
const content = await fetchContent();
return <Modal><ServerRenderedContent data={content} /></Modal>;
}الحد الفاصل للعميل
تجعل إضافة 'use client' الملف وجميع استيراداته التابعة له على جهة العميل. ولإبقاء أحد الأبناء مكوّن خادم، مرّره بوصفه خاصية أو فتحة بدلًا من استيراده مباشرةً.
أنماط جلب البيانات
اجلب البيانات في مكوّنات الخادم ومرّرها إلى الأسفل. وتجنّب الجلب في مكوّنات العميل متى أمكن، لأنه يزيد حجم حزمة العميل ويكرر منطق الخادم.
// Good: fetch in server, pass to client
async function Page() {
const user = await getUser();
return <UserProfile user={user} />; // client component
}
// Avoid: fetch in client
'use client';
function UserProfile() {
const { data } = useSWR('/api/user', fetcher); // network request from browser
}أدوات مخصصة للخادم فقط
تُصدر حزمة server-only خطأً أثناء البناء إذا استُوردت وحدة مخصصة للخادم فقط عن طريق الخطأ في مكوّن عميل.
// lib/db.ts
import 'server-only'; // throws at build time if imported in 'use client' file
export const db = createDbClient(process.env.DB_URL);مشاركة الحالة بين الخادم والعميل
لا يمكن لمكوّنات الخادم الاحتفاظ بالحالة. ولمشاركة الحالة الناتجة عن جلب من الخادم مع مكوّنات العميل التفاعلية، مرّرها في الخصائص أثناء العرض الأولي، ثم أدر التحديثات على جهة العميل.
متى تضيف use client
أضف 'use client' عندما تحتاج إلى الخطافات مثل useState وuseEffect، أو أحداث المتصفح مثل onClick، أو واجهات برمجة المتصفح مثل localStorage وwindow، أو مكتبات خارجية تعمل على جهة العميل.
تحقق سريع
ما الذي يجب إضافته إلى أعلى الملف لاستخدام useState أو onClick في App Router ضمن Next.js؟
مراجعة
جميع مكوّنات App Router هي مكوّنات خادم افتراضيًا، ما يعني عدم وجود JavaScript في حزمة العميل وإمكانية الوصول المباشر إلى البيانات. أضف 'use client' فقط عندما تحتاج إلى التفاعلية. كوّن المكوّنات بتمرير البيانات التي جُلبت من الخادم في صورة خصائص أو أبناء إلى أغلفة العميل، مع إبقاء الحد الفاصل للعميل عند أدنى مستوى ممكن.
الأسئلة الشائعة
هل درس «مكوّنات الخادم مقابل مكوّنات العميل في Next.js» مجاني؟
نعم — نص درس «مكوّنات الخادم مقابل مكوّنات العميل في Next.js» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.
ماذا ستتعلم في «مكوّنات الخادم مقابل مكوّنات العميل في Next.js»؟
حدّد متى تضيف 'use client' وكيفية تركيب شجرتَي الخادم والعميل. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «مكوّنات الخادم مقابل مكوّنات العميل في Next.js»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- اصطلاحات ملفات App Router
- مكوّنات الخادم مقابل مكوّنات العميل في Next.js
- المسارات الديناميكية ومجموعات المسارات
- واجهة Metadata API وتحسين محركات البحث في App Router