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

تسمح لك مكونات العميل (Client Components) بكتابة واجهة مستخدم تفاعلية يتم تقديمها مسبقًا على الخادم ويمكن استخدام جافاسكريبت على جانب العميل للتشغيل في المتصفح.

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

فوائد التقديم على جانب العميل

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

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

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

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

يستخدم "use client" لتعريف حد فاصل بين وحدات مكون الخادم ومكون العميل. هذا يعني أنه من خلال تعريف "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". هذا لأنه افتراضيًا، جميع المكونات في App Router هي مكونات خادم حيث لا تتوفر هذه الواجهات. من خلال تعريف توجيه "use client" في toggle.js، يمكنك إخبار React بالدخول إلى حد العميل حيث تتوفر هذه الواجهات.

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

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

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

كيف يتم تقديم مكونات العميل؟

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

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

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

على الخادم:

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

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

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

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

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

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

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

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

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

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

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