مكونات الخادم مقابل مكونات العميل في React الحديثة: ما الذي يجب أن يعرفه المطورون؟

تطورت React بشكل كبير مع ظهور Server Components والبنى الحديثة لتطبيقات React المتكاملة. فبدلاً من إرسال جميع المكونات وكود JavaScript الخاص بها إلى المتصفح، أصبح بإمكان المطورين تحديد الأجزاء التي يجب أن تعمل على الخادم والأجزاء التي تحتاج إلى العمل داخل المتصفح.

ويكتسب هذا الأسلوب أهمية خاصة عند بناء التطبيقات الحديثة باستخدام أطر عمل مثل Next.js. ففي App Router في Next.js، تكون المكونات Server Components بشكل افتراضي، بينما يمكن للمطورين استخدام Client Components عندما تكون هناك حاجة إلى التفاعل داخل المتصفح.

يساعد فهم الفرق بين Server Components وClient Components المطورين على بناء تطبيقات أسرع وأكثر كفاءة وأسهل في الصيانة وأكثر ملاءمة لمتطلبات تطوير الويب الحديثة.

ما هي Server Components؟

Server Components هي مكونات React يتم تنفيذها وعرضها في بيئة الخادم بدلاً من تشغيلها كمكونات تفاعلية داخل المتصفح. ويمكن تشغيلها أثناء عملية البناء أو على الخادم عند وصول الطلب.

وبما أن Server Components لا تحتاج إلى إرسال كود المكون بالكامل إلى المتصفح لكي تعمل كتجربة تفاعلية، فإنها تساعد على تقليل كمية JavaScript التي يحتاج المتصفح إلى تنزيلها وتنفيذها.

وتكون Server Components مناسبة بشكل خاص للصفحات التي تحتوي على الكثير من المحتوى، وجلب البيانات، والوصول إلى قواعد البيانات، وواجهات المستخدم التي لا تحتاج إلى تفاعل مباشر داخل المتصفح.

مثال على Server Component

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <div>
      <h1>Products</h1>

      {products.map((product) => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>{product.price}</p>
        </div>
      ))}
    </div>
  );
}

يمكن لهذا المكون الحصول على البيانات من الخادم ثم عرض واجهة المستخدم الناتجة دون الحاجة إلى إرسال تنفيذ المكون بالكامل إلى المتصفح.

ما هي Client Components؟

Client Components هي مكونات مخصصة للعمل داخل المتصفح. وتكون ضرورية عندما يحتاج المكون إلى Browser APIs أو حالة محلية أو معالجات أحداث أو تأثيرات أو أي سلوك تفاعلي آخر.

في أطر العمل مثل Next.js، يتم عادةً تحديد Client Component من خلال وضع التوجيه "use client" في بداية الملف.

مثال على Client Component

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

يحتاج هذا المكون إلى العمل داخل المتصفح لأنه يعتمد على الحالة state وعلى حدث النقر.

Server Components مقابل Client Components

لماذا نستخدم Server Components؟

1. تقليل JavaScript على العميل

من أهم فوائد Server Components أن تنفيذها لا يحتاج إلى إرساله إلى المتصفح ككود مكونات يعمل على العميل.

يمكن أن يؤدي ذلك إلى تقليل كمية JavaScript التي يحتاج المتصفح إلى تحميلها وتشغيلها، مما قد يساعد في تحسين أداء التطبيق.

2. جلب البيانات من الخادم

تعتبر Server Components مناسبة للحصول على البيانات من قواعد البيانات وواجهات API والملفات وغيرها من الموارد الموجودة على الخادم.

export default async function Dashboard() {
  const orders = await database.orders.findMany();

  return (
    <section>
      <h1>Recent Orders</h1>

      {orders.map((order) => (
        <p key={order.id}>Order #{order.id}</p>
      ))}
    </section>
  );
}

يسمح هذا بإبقاء عملية الوصول إلى البيانات على الخادم بدلاً من إجبار المتصفح على إجراء طلب إضافي فقط للحصول على البيانات اللازمة لعرض المحتوى الأولي.

3. إبقاء العمليات الحساسة على الخادم

يمكن أن تكون العمليات التي تتعامل مع قواعد البيانات وبيانات الاعتماد الخاصة والخدمات الداخلية والموارد الأخرى التي يجب ألا تظهر للمتصفح مناسبة للتنفيذ على الخادم.

ومع ذلك، يجب على المطورين اتباع ممارسات الأمان المناسبة وعدم إرسال البيانات الحساسة إلى Client Components عن طريق الخطأ.

4. مناسبة للصفحات التي تحتوي على الكثير من المحتوى

يمكن أن تستفيد المدونات وصفحات المنتجات وصفحات التوثيق وصفحات التسويق ولوحات المعلومات وغيرها من الواجهات المعتمدة على البيانات من Server Components.

لماذا نستخدم Client Components؟

1. واجهات المستخدم التفاعلية

الأزرار والقوائم المنسدلة وعلامات التبويب والنوافذ المنبثقة وأدوات التصفية وأشرطة الصور وغيرها من العناصر التفاعلية تحتاج غالباً إلى Client Components.

2. استخدام React State

إذا كان المكون يستخدم Hooks مثل useState، فإنه يحتاج عادةً إلى أن يكون Client Component في بنية تعتمد على Server Components.

"use client";

import { useState } from "react";

export default function Menu() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>
        Menu
      </button>

      {open && <nav>Navigation Links</nav>}
    </div>
  );
}

3. استخدام Browser APIs

تعتبر Client Components مناسبة عندما يحتاج الكود إلى واجهات المتصفح مثل localStorage أو window أو document أو واجهات الوسائط وغيرها من إمكانيات المتصفح.

4. معالجات الأحداث

معالجات الأحداث مثل onClick وonChange وonSubmit تحتاج إلى سلوك يعمل على جانب العميل.

كيف تعمل Server Components وClient Components معاً؟

لا يعني الاختيار بين Server Components وClient Components أن التطبيق بأكمله يجب أن يستخدم نوعاً واحداً فقط. يمكن للتطبيقات الحديثة الجمع بين النوعين داخل شجرة المكونات نفسها.

من الأساليب الشائعة إبقاء الصفحة والمكونات المسؤولة عن جلب البيانات على الخادم، ونقل الأجزاء التفاعلية فقط إلى العميل.

// Server Component

import LikeButton from "./LikeButton";

export default async function Post() {
  const post = await getPost();

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>

      <LikeButton />
    </article>
  );
}

يمكن للصفحة الحصول على المقال وعرضه على الخادم، بينما يمكن أن يكون LikeButton عبارة عن Client Component مسؤول عن تفاعل المستخدم.

ما هو التوجيه "use client"؟

يشير التوجيه "use client" إلى أن الوحدة يجب أن يتم التعامل معها كجزء من مكونات العميل.

"use client";

export default function SearchBox() {
  // Client-side interactive component
}

من المهم عدم إضافة "use client" إلى جميع المكونات بشكل تلقائي. من الأفضل وضع الحد الفاصل بين الخادم والعميل حول أصغر جزء من واجهة المستخدم يحتاج فعلاً إلى وظائف المتصفح.

ماذا عن "use server"؟

من الأخطاء الشائعة الاعتقاد بأن "use server" تعني أن المكون هو Server Component. هذا غير صحيح.

يُستخدم "use server" مع Server Functions. أما Server Components نفسها فلا تحتاج إلى توجيه "use server".

ويصبح هذا الفرق مهماً بشكل خاص عند استخدام ميزات React الحديثة مثل Server Functions والأطر التي تدعم React Server Components.

اعتبارات الأداء

تتميز Server Components وClient Components بخصائص أداء مختلفة.

يمكن أن يساعد استخدام Server Components في الأجزاء المناسبة من التطبيق على تقليل كمية JavaScript التي تصل إلى المتصفح. وفي المقابل، تظل Client Components ضرورية لبناء تجارب تفاعلية.

لذلك، الهدف ليس التخلص من Client Components، وإنما تجنب تحويل أجزاء كبيرة وغير تفاعلية من التطبيق إلى مكونات تعمل على العميل دون حاجة.

متى تستخدم Server Components؟

• جلب البيانات من قاعدة بيانات أو API على الخادم
• عرض المحتوى الثابت أو شبه الثابت
• عرض المقالات والمدونات
• إنشاء صفحات التوثيق
• عرض معلومات المنتجات
• الوصول إلى الموارد الخاصة بالخادم
• تنفيذ معالجة البيانات على الخادم
• تقليل JavaScript غير الضروري على العميل

متى تستخدم Client Components؟

• النماذج التفاعلية
• الأزرار التي تعتمد على الحالة
• القوائم المنسدلة
• علامات التبويب والأقسام القابلة للفتح والإغلاق
• أدوات التصفية التفاعلية
• سلال التسوق
• الحركات التفاعلية التي تعتمد على المستخدم
• Browser APIs مثل localStorage
• المكونات التي تستخدم React State أو Effects

مثال عملي: صفحة منتج في متجر إلكتروني

لنفترض أن لديك صفحة منتج في متجر إلكتروني.

يمكن الحصول على معلومات المنتج والوصف والسعر والصور ومعلومات المخزون وعرضها باستخدام Server Components.

لكن الأجزاء التالية قد تحتاج إلى Client Components:

• اختيار كمية المنتج
• اختيار اللون والمقاس
• زر إضافة إلى السلة
• زر المفضلة
• أزرار التحكم في معرض الصور
• التقييمات التفاعلية

تسمح هذه البنية بإبقاء الأقسام التي تعتمد على البيانات والمحتوى على الخادم، مع جعل عناصر التحكم التفاعلية فقط تعمل على العميل.

أخطاء شائعة يرتكبها المطورون

تحويل كل شيء إلى Client Component

إضافة "use client" إلى مكونات رئيسية كبيرة يمكن أن تجعل العديد من الوحدات التابعة جزءاً من بنية العميل، مما قد يزيد كمية JavaScript التي يتم إرسالها إلى المتصفح.

استخدام Client Components للمحتوى البسيط

العنوان أو المقال أو وصف المنتج أو القائمة التي يتم جلبها من الخادم لا تحتاج تلقائياً إلى أن تكون تفاعلية.

جلب جميع البيانات باستخدام useEffect

عند استخدام بنية Server Components، لا يحتاج المطور دائماً إلى انتظار تحميل المتصفح ثم جلب البيانات الأولية باستخدام useEffect. يمكن في كثير من الحالات جلب البيانات على الخادم ثم استخدامها أثناء عملية العرض.

الخلط بين SSR وServer Components

يرتبط Server-side rendering بمفهوم Server Components، ولكنهما ليسا الشيء نفسه. يشير SSR إلى إنشاء HTML على الخادم، بينما تحدد Server Components مكان تنفيذ منطق المكونات واعتمادياتها ضمن بنية React Server Components.

أفضل الممارسات لتطبيقات React الحديثة

1. ابدأ باستخدام Server Components عند استخدام إطار عمل يدعمها بشكل افتراضي.
2. استخدم Client Components عند الحاجة فقط للتفاعل أو وظائف المتصفح.
3. اجعل حدود العميل صغيرة قدر الإمكان عندما يكون ذلك مناسباً.
4. اجلب البيانات المناسبة على الخادم بدلاً من نقل عملية جلب البيانات الأولية إلى المتصفح دون حاجة.
5. افصل بين جلب البيانات وواجهة المستخدم التفاعلية عندما تكون هذه البنية أكثر ملاءمة.
6. راجع مكتبات الطرف الثالث لأن بعض المكتبات تعتمد على Browser APIs أو ميزات React الخاصة بالعميل.
7. قم بقياس الأداء الفعلي بدلاً من افتراض أن بنية واحدة ستكون الأسرع في جميع الحالات.

Server Components مقابل Client Components: دليل سريع للاختيار

الخلاصة

Server Components وClient Components ليستا تقنيتين متنافستين، بل هما مكونان متكاملان لبناء تطبيقات React الحديثة.

تعتبر Server Components خياراً قوياً لجلب البيانات وعرض المحتوى وتنفيذ العمليات على الخادم وتقليل JavaScript غير الضروري على العميل. أما Client Components فهي ضرورية عندما يحتاج المستخدم إلى التفاعل مع الواجهة من خلال الحالة والأحداث وواجهات المتصفح وغيرها من إمكانيات العميل.

غالباً ما تجمع أفضل البنى بين النوعين. ابدأ باستخدام Server Components حيثما كان ذلك مناسباً، ثم حدد أجزاء الواجهة التي تحتاج فعلاً إلى العمل داخل المتصفح، واستخدم Client Components عند تلك الحدود.

بالنسبة للمطورين الذين يبنون تطبيقات React حديثة في عام 2026، فإن فهم المكان المناسب للحد الفاصل بين الخادم والعميل أصبح جزءاً مهماً من بناء تطبيقات ويب سريعة وقابلة للتوسع وسهلة الصيانة.