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

الدرس 12 من 25· ⏱ 1 دقائق قراءة

التفعيل بـ "use client"

ضع التوجيه في أعلى الملف لجعل المكوّن يعمل في المتصفّح:

"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

متى تستخدمها؟

الحالة والتفاعل (useState، useEffect).
أحداث المستخدم (onClick، onChange).
واجهات المتصفّح (localStorage، window).

القاعدة الذهبية

💡 اجعل المكوّنات خادمية افتراضيًا، وحوّل للعميل فقط الأجزاء التفاعليّة الصغيرة (الأوراق في الشجرة). هذا يقلّل حجم جافاسكربت المُرسَل.

دمج الاثنين

مكوّن الخادم يمكنه استيراد مكوّن عميل وتمرير بيانات له كخصائص:

// مكوّن خادم
import LikeButton from "./LikeButton"; // "use client"

export default async function Post() {
  const post = await getPost();
  return (
    <article>
      <h1>{post.title}</h1>
      <LikeButton postId={post.id} />
    </article>
  );
}

🎯 التالي: إجراءات الخادم (Server Actions).

هل كان هذا الدرس مفيدًا؟