مكونات الخادم والعميل

لفهم كيفية عمل مكونات الخادم والعميل، من المفيد الإلمام بمفهومين أساسيين في الويب:

• البيئات التي يمكن تنفيذ كود التطبيق فيها: الخادم والعميل.
• حدود الشبكة التي تفصل بين كود الخادم والعميل.

بيئات الخادم والعميل

في سياق تطبيقات الويب:

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

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

لذلك، الكود الذي تكتبه للخادم والعميل ليس دائمًا متطابقًا. بعض العمليات (مثل جلب البيانات أو إدارة حالة المستخدم) تكون أكثر ملاءمة لبيئة عن الأخرى.

حدود الشبكة

حدود الشبكة هي خط افتراضي يفصل بين البيئات المختلفة.

في React، يمكنك اختيار مكان وضع حدود الشبكة في شجرة المكونات الخاصة بك. على سبيل المثال، يمكنك جلب البيانات وعرض منشورات المستخدم على الخادم (باستخدام مكونات الخادم)، ثم عرض زر LikeButton التفاعلي لكل منشور على العميل (باستخدام مكونات العميل).

بالمثل، يمكنك إنشاء مكون Nav يتم عرضه على الخادم ومشاركته عبر الصفحات، ولكن إذا كنت تريد عرض حالة نشطة للروابط، يمكنك عرض قائمة Links على العميل.

خلف الكواليس، يتم تقسيم المكونات إلى رسمين بيانيين للوحدات. رسم الوحدات البياني للخادم (أو الشجرة) يحتوي على جميع مكونات الخادم التي يتم عرضها على الخادم، ورسم الوحدات البياني للعميل (أو الشجرة) يحتوي على جميع مكونات العميل.

بعد عرض مكونات الخادم، يتم إرسال تنسيق بيانات خاص يسمى حمل مكون خادم React (RSC) إلى العميل. يحتوي حمل RSC على:

1. نتيجة عرض مكونات الخادم.
2. عناصر نائبة (أو فجوات) للمكان الذي يجب أن يتم عرض مكونات العميل فيه ومراجع لملفات JavaScript الخاصة بها.

يستخدم React هذه المعلومات لتوحيد مكونات الخادم والعميل وتحديث DOM على العميل.

دعونا نرى كيف يعمل هذا.

استخدام مكونات العميل

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

بالنظر إلى الخطأ في متصفحك، يحذرك Next.js من أنك تحاول استخدام useState داخل مكون خادم. يمكنك إصلاح ذلك عن طريق نقل زر "الإعجاب" التفاعلي إلى مكون عميل.

قم بإنشاء ملف جديد يسمى like-button.js داخل مجلد app يقوم بتصدير مكون LikeButton:

export default function LikeButton() {}

انقل عنصر <button> ودالة handleClick() من page.js إلى مكون LikeButton الجديد الخاص بك:

export default function LikeButton() {
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

بعد ذلك، انقل حالة likes والاستيراد:

import { useState } from 'react';
 
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

الآن، لجعل LikeButton مكون عميل، أضف توجيه React 'use client' في أعلى الملف. هذا يخبر React بعرض المكون على العميل.

'use client';
 
import { useState } from 'react';
 
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

عد إلى ملف page.js الخاص بك، وقم باستيراد مكون LikeButton إلى صفحتك:

import LikeButton from './like-button';
 
function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
export default function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <LikeButton />
    </div>
  );
}

احفظ كلا الملفين وعرض تطبيقك في المتصفح. الآن بعد أن لم يعد هناك أخطاء، بمجرد إجراء التغييرات والحفظ، يجب أن تلاحظ أن المتصفح يقوم بالتحديث تلقائيًا ليعكس التغيير.

تسمى هذه الميزة التحديث السريع (Fast Refresh). تمنحك ملاحظات فورية على أي تعديلات تقوم بها وتأتي مع Next.js مسبقًا.

ملخص

لتلخيص ما تعلمته، تعرفت على بيئات الخادم والعميل ومتى تستخدم كل منها. كما تعلمت أن Next.js يستخدم مكونات خادم React افتراضيًا لتحسين الأداء، وكيف يمكنك اختيار استخدام مكونات العميل لجعل أجزاء صغيرة من واجهة المستخدم الخاصة بك تفاعلية.

قراءة إضافية

هناك المزيد لتعلمه حول مكونات الخادم والعميل. إليك بعض الموارد الإضافية:

• وثائق مكونات الخادم
• وثائق مكونات العميل
• أنماط التكوين
• توجيه "use client"
• توجيه "use server"