ما هو التوجيه "use client" ومتى يجب استخدامه في بنية RSC؟

Question

تقدم السؤاللم أبدأقيد المراجعةمتقن

تكرار السؤال: …

Answer 1

الإجابة المختصرة

هو علامة ترسيمية (Boundary) تحدد نقطة الانتقال من بيئة عمل المكونات الخادومية إلى مكونات العميل التفاعلية التي تتطلب استخدام الـ State والـ Effects وأحداث المتصفح.

الشرح

افتراضياً في بنية RSC تكون كافة المكونات هي Server Components. عند الحاجة لتفاعل المستخدم (مثل استخدام useState, useEffect, onClick)، نضع السطر "use client" في أول الملف لتعريفه كـ Client Component. المكونات المستوردة داخل هذا الملف تصبح تلقائياً جزءاً من حزمة المتصفح.

مثال بالكود

'use client';

import { useState } from 'react';

export function UpvoteButton() {
  const [votes, setVotes] = useState(0);

  return (
    <button onClick={() => setVotes(v => v + 1)}>
      تصويت ({votes})
    </button>
  );
}

أخطاء شائعة

وضع "use client" في قمة ملف التخطيط الأساسي (Root Layout)، مما يحول التطبيق بالكامل إلى CSR ويفقد مزايا الخادم.

أسئلة متابعة

المصادر

React docs — use client