استخدام use client

يعلن توجيه 'use client' عن نقطة دخول للمكونات التي سيتم عرضها على جانب العميل ويجب استخدامه عند إنشاء واجهات مستخدم تفاعلية (UI) تتطلب إمكانيات جافا سكريبت من جانب العميل، مثل إدارة الحالة، ومعالجة الأحداث، والوصول إلى واجهات برمجة تطبيقات المتصفح. هذه ميزة من ميزات 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>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

'use client'

import { useState } from 'react'

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

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

عند استخدام توجيه 'use client'، يجب أن تكون خصائص مكونات العميل قابلة للتسلسل. هذا يعني أن الخصائص يجب أن تكون بتنسيق يمكن لـ React تسلسله عند إرسال البيانات من الخادم إلى العميل.

'use client'

export default function Counter({
  onClick /* ❌ الدالة غير قابلة للتسلسل */,
}) {
  return (
    <div>
      <button onClick={onClick}>Increment</button>
    </div>
  )
}

'use client'

export default function Counter({
  onClick /* ❌ الدالة غير قابلة للتسلسل */,
}) {
  return (
    <div>
      <button onClick={onClick}>Increment</button>
    </div>
  )
}

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

يسمح لك دمج مكونات الخادم والعميل ببناء تطبيقات تكون سريعة الأداء وتفاعلية في نفس الوقت:

1. مكونات الخادم: استخدمها للمحتوى الثابت، جلب البيانات، والعناصر الصديقة لمحركات البحث.
2. مكونات العميل: استخدمها للعناصر التفاعلية التي تتطلب حالة، تأثيرات، أو واجهات برمجة تطبيقات المتصفح.
3. تكوين المكونات: قم بتداخل مكونات العميل داخل مكونات الخادم حسب الحاجة لفصل واضح بين منطق الخادم والعميل.

في المثال التالي:

• Header هو مكون خادم يعالج المحتوى الثابت.
• Counter هو مكون عميل يمكّن التفاعل داخل الصفحة.

import Header from './header'
import Counter from './counter' // هذا مكون عميل

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

import Header from './header'
import Counter from './counter' // هذا مكون عميل

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

المراجع

راجع وثائق React لمزيد من المعلومات حول 'use client'.