يا هلا بيك يا صديقي المبرمج في عالم تطوير الويب (Web Development)! فكر معايا كده، كام مرة اشتغلت على مشروع ويب ولحظت إن التطبيق بيبطأ، وحجم ملفات الجافا سكربت (JavaScript Bundle Size) بقى ضخم لدرجة إن المستخدم بيقعد يستنى كتير عشان الصفحة تفتح؟ وجع القلب ده، وبطء التحميل، واستهلاك باقة الموبايل بتاع المستخدم، دي كلها مشاكل كنا بنعاني منها واحنا بنبني تطبيقات باستخدام إطارات العمل التقليدية. هنا بقى بيجي دور السحر الحقيقي في إطار العمل الشهير نكست جي إس (Next.js 14)، وتحديداً هندسة مكونات الخادم أو ما تبحر في معرفته باسم مكونات الخادم في رياكت (React Server Components - RSC).

في المقال ده، هناخد رحلة تفصيلية وعميقة عشان نفهم إزاي نستخدم هندسة (React Server Components) في (Next.js 14)، وإيه الفرق الجوهري بين مكونات الخادم (Server Components) ومكونات العميل (Client Components)، وإزاي نقدر نطلع بأقصى سرعة ممكنة وأعلى أداء (Performance) لتطبيقاتنا. جهز كوباية الشاي بتاعتك، ويلا بينا نبدأ!

إيه هي أصلاً مكونات الخادم (React Server Components) وليه اتوجد أصلاً؟

زمان، قبل ما تظهر الـ (React Server Components)، كان كل الكود اللي بنكتبه برياكت بيتحمل وينفذ على متصفح المستخدم (Client-side). ده كان بيعني إن المتصفح محتاج ينزل ملفات جافا سكربت ضخمة، يعملها تحليل (Parsing)، ويبدأ يبعت طلبات (API Requests) عشان يجيب البيانات، وده كان بيسبب تأخير ملحوظ، خصوصاً عند الناس اللي الإنترنت عندهم ضعيف.

مع (Next.js 14) ورياضت 18، الموضوع اتغير تماماً وبقى عندنا نوعين من المكونات:

• مكونات الخادم (Server Components - RSC): دي المكونات اللي بيتم تشغيلها ورندرها (Rendered) بالكامل على السيرفر (Server). المستخدم بيوصله HTML جاهز ونظيف، ومن غير ما يتحمل أي سطر جافا سكربت خاص بالمكون ده على المتصفح بتاعه.
• مكونات العميل (Client Components): دي المكونات التقليدية اللي متعودين عليها، اللي بتشتغل على جهاز المستخدم في المتصفح، وعادة بنحتاجها لما يكون عندنا تفاعل (Interactivity) زي أزرار الـ (Click Events)، أو استخدام (React Hooks) زي (useState) و(useEffect).

الفرق الجوهري بين Server Components و Client Components في Next.js 14

ع عشان تفهم الصورة صح، لازم تعرف إن (Next.js 14) بيعتبر أي مكون بتكتبه جوه مجلد (app/) هو (Server Component) بشكل افتراضي (By Default). دي نقطة ذكية جداً من الفريق المطور لأنهم بيخلوا الأداء العالي هو القاعدة، والتفاعل هو الاستثناء.

تعال نبص على مثال عملي يوضح الفرق:

// app/posts/page.jsx
// هذا يعتبر Server Component افتراضياً
import { fetchPosts } from '@/lib/api';

export default async function PostsPage() {
  // بنجيب البيانات مباشرة من السيرفر وبدون useEffect
  const posts = await fetchPosts();

  return (
    <div>
      <h1>قائمة المقالات السريعة</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </div>
      ))}
    </div>
  );
}

في الكود اللي فوق ده، عملية جلب البيانات (Data Fetching) حصلت على السيرفر مباشرة، وقاعدة البيانات أو الـ API كانت قريبة جداً من السيرفر، فده خلى السرعة خيالية. والأهم من كده، إن مكتبات جلب البيانات الكبيرة مش هتنزل في ملفات الجافا سكربت اللي هتروح للمستخدم.

طيب، امتى بقى نحتاج نستخدم مكون عميل (Client Component)؟ بنحتاجه لما نكون محتاجين نضيف تفاعل للمستخدم، وهنا لازم نستخدم التوجيه الشهير (use client) في أول الملف، زي المثال ده:

'use client';

import { useState } from 'react';

export default function LikeButton() {
  const [likes, setLikes] = القاعدة(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      أعجبني ({likes})
    </button>
  );
}

بما إن الزرار ده محتاج حالة (State) وتفاعل مع الضغط، فهنا كان لازم نقول لـ (Next.js) إن ده (Client Component) باستخدام سطر 'use client';.

إزاي تستفيد من أقصى سرعة ممكنة للتطبيق (Performance Optimization)؟

عشان تاخد أفضل أداء وأعلى سرعة تحميل لموقعك باستخدام هندسة (React Server Components) في (Next.js 14)، فيه قواعد ذهبية لازم تمشي عليها:

• حافظ على السيرفر كومبوننت كقاعدة عامة: اجعل كل صفحاتك ومكوناتك (Server Components) قدر الإمكان، وما تحول أي مكون إلى (Client Component) إلا لو اضطريت للتفاعل أو الهوكس (Hooks).
• انقل الـ Client Components للأطراف (Push to the Edges): يعني لو عندك شجرة مكونات كبيرة، خليهم كلهم سيرفر، وحط زرار التفاعل الصغير بس في آخر فرع كـ (Client Component)، عشان تقلل حجم الجافا سكربت قدر الإمكان.
• الاستفادة من التخزين المؤقت (Caching): (Next.js 14) بيعمل كاشنج ذكي جداً لنتائج جلب البيانات في الـ (Server Components)، وده بيخلي التنقل بين الصفحات لحظي (Instant Navigation).

خاتمة ونصيحة من أخ

يا صديقي، تقنية (React Server Components) في (Next.js 14) مش مجرد موضة جديدة، دي نقلة نوعية في طريقة بناء تطبيقات الويب. في الأول ممكن تحس إن الموضوع ملخبط شوية، وإمتى تستخدم ده وإمتى تستخدم ده، بس مع الاستمرارية والتجربة هتلاقي ايدك خدت على النظام وبقى طابع أصيل في طريقة تفكيرك البرمجية.

نصيحتي ليك: ما تكتفيش بالقراءة وبس؛ افتح الكود حالياً واعمل مشروع تجريبي بـ (Next.js 14)، وجرب تفصل الـ (UI) عن الـ (Interactivity). الغلط هو أقصر طريق للتعلم، وكل خطأ هتقابله هو خبرة بتضاف لسيرتك الذاتية كمبرمج محترف. بالتوفيق في رحلتك البرمجية!