مكونات العميل (Client Components)

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

ستتعرف في هذه الصفحة على كيفية عمل مكونات العميل، وكيف يتم عرضها، ومتى قد تستخدمها.

فوائد العرض على جانب العميل

هناك عدة فوائد لعملية العرض على جانب العميل، بما في ذلك:

• التفاعلية: يمكن لمكونات العميل استخدام الحالة (state)، والتأثيرات (effects)، ومستمعي الأحداث (event listeners)، مما يعني أنها يمكنها تقديم ردود فعل فورية للمستخدم وتحديث واجهة المستخدم.
• واجهات برمجة المتصفح (Browser APIs): يمكن لمكونات العميل الوصول إلى واجهات برمجة المتصفح، مثل تحديد الموقع الجغرافي (geolocation) أو التخزين المحلي (localStorage)، مما يسمح لك ببناء واجهة مستخدم لحالات استخدام محددة.

استخدام مكونات العميل في Next.js

لاستخدام مكونات العميل، يمكنك إضافة توجيه React "use client" في أعلى الملف، قبل عمليات الاستيراد.

يستخدم "use client" لتعريف حد فاصل بين وحدات مكون الخادم (Server Component) ومكون العميل (Client Component). هذا يعني أنه عند تعريف "use client" في ملف، فإن جميع الوحدات الأخرى المستوردة إليه، بما في ذلك المكونات الفرعية، تعتبر جزءًا من حزمة العميل.

'use client'

import { useState } from 'react'

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

'use client'

import { useState } from 'react'

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

يظهر الرسم البياني أدناه مكونات متداخلة، حيث يؤدي استخدام onClick و useState في toggle.js إلى حدوث خطأ إذا لم يتم تعريف توجيه "use client". وذلك لأنه افتراضيًا، يتم عرض المكونات على الخادم حيث لا تتوفر هذه الواجهات. من خلال تعريف توجيه "use client" في toggle.js، يمكنك إخبار React بعرض المكون ومكوناته الفرعية على العميل، حيث تتوفر الواجهات.

تعريف نقاط دخول متعددة لـ use client:

يمكنك تعريف نقاط دخول متعددة لـ "use client" في شجرة مكونات React. هذا يسمح لك بتقسيم تطبيقك إلى عدة حزم عميل (أو فروع).

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

كيف يتم عرض مكونات العميل؟

في Next.js، يتم عرض مكونات العميل بشكل مختلف اعتمادًا على ما إذا كان الطلب جزءًا من تحميل صفحة كامل (زيارة أولية لتطبيقك أو إعادة تحميل الصفحة عن طريق تحديث المتصفح) أو تنقل لاحق.

تحميل صفحة كامل

لتحسين تحميل الصفحة الأولي، سيستخدم Next.js واجهات React لعرض معاينة HTML ثابتة على الخادم لكل من مكونات العميل والخادم. هذا يعني أنه عندما يزور المستخدم تطبيقك لأول مرة، سيرى محتوى الصفحة على الفور، دون الحاجة إلى انتظار تحميل العميل وتحليل وتنفيذ حزمة JavaScript لمكون العميل.

على الخادم:

1. يقوم React بعرض مكونات الخادم في تنسيق بيانات خاص يسمى حمولة مكون خادم React (RSC Payload)، والذي يتضمن إشارات إلى مكونات العميل.
2. يستخدم Next.js حمولة RSC وتعليمات JavaScript لمكون العميل لعرض HTML للمسار على الخادم.

ثم على العميل:

1. يتم استخدام HTML لعرض معاينة أولية سريعة غير تفاعلية للمسار على الفور.
2. تستخدم حمولة مكونات خادم React لتنسيق أشجار مكونات العميل والخادم، وتحديث DOM.
3. تستخدم تعليمات JavaScript لترطيب (hydrate) مكونات العميل وجعل واجهتها قابلة للتفاعل.

ما هو الترطيب (hydration)؟

الترطيب هو عملية إضافة مستمعي الأحداث إلى DOM، لجعل HTML الثابت تفاعليًا. خلف الكواليس، يتم الترطيب باستخدام واجهة React hydrateRoot.

التنقلات اللاحقة

في التنقلات اللاحقة، يتم عرض مكونات العميل بالكامل على العميل، دون HTML المعروض على الخادم.

هذا يعني أنه يتم تحميل وتحليل حزمة JavaScript لمكون العميل. بمجرد أن تصبح الحزمة جاهزة، سيستخدم React حمولة RSC لتنسيق أشجار مكونات العميل والخادم، وتحديث DOM.

العودة إلى بيئة الخادم

في بعض الأحيان، بعد تعريف حد "use client" الفاصل، قد ترغب في العودة إلى بيئة الخادم. على سبيل المثال، قد ترغب في تقليل حجم حزمة العميل، أو جلب البيانات على الخادم، أو استخدام واجهة برمجة متاحة فقط على الخادم.

يمكنك الاحتفاظ بالكود على الخادم حتى لو كان نظريًا متداخلًا داخل مكونات العميل عن طريق تبادل مكونات العميل والخادم وإجراءات الخادم. راجع صفحة أنماط التكوين (Composition Patterns) لمزيد من المعلومات.