أخطاء استخدام use client في Next.js

الغلطة اللي بيقع فيها 90٪ من مبرمجين Next.js
لو بتبدأ مشروع Next.js وبتحط جملة "use client" في أول كل ملف React عندك…
فاسمحلي أقولك إنك كده بتقتل أهم ميزة في نيكست بإيدك

بس قبل ما نزعل خلينا نفهم ليه ده خطر وإزاي تصلحه بأسهل طريقة ممكنة.

يعني إيه "use client" أصلاً؟ ​

ببساطة، لما تكتب "use client" فوق كودك، إنت كده بتقول لـ Next.js:
"سيب السيرفر يا عم، وشغل الكود ده في المتصفح بدل كده"

ودي مشكلة كبيرة
لأن كده الصفحة بتتحول بالكامل إلى Client-Side Rendering (CSR) بدل Server-Side Rendering (SSR)، وده بيأثر على ٣ حاجات مهمة جدًا:

الأداء بيقل - لأن المتصفح بيعمل كل الشغل بنفسه.
التحميل بيطول - خصوصًا في الصفحات اللي فيها بيانات كتير.
الـ SEO بينهار - لأن جوجل مش هيشوف المحتوى بسهولة.

وبكده… مشروعك في Next.js بيبقى شبه React عادي بدون أي ميزة حقيقية.

---

طب إمتى أستخدم "use client" صح؟ ​

مش كل الكومبوننت محتاجة "use client"، استخدمها بس لما تكون فيه تفاعلات مباشرة مع المستخدم.
يعني الكود بيتعامل مع:
زرار أو فورم أو input
Hooks زي useState أو useEffect
DOM بشكل مباشر (زي تعديل عناصر أو مراقبة أحداث)

ببساطة، أي حاجة فيها Interactivity يبقى تستحق "use client"

لكن لو الكومبوننت بتعرض بيانات بس (Static أو Server Data)، يبقى خليه Server Component علشان الأداء يفضل سريع والسيو ممتاز

---

مثال عملي يوضح الفرق ​

كود غلط:​

"use client";
export default function ProductsPage() {
  const products = await fetch("https://api.example.com/products").then(res => res.json());
  return (
    <div>
      {products.map(p => (
        <p key={p.id}>{p.name}</p>
      ))}
    </div>
  );
}

المشكلة هنا إن الكود بيعمل fetch من المتصفح نفسه،
وده بيخلي وقت التحميل أطول والـ SEO ضعيف جدًا

---

الكود الصح:​

export default async function ProductsPage() {
  const products = await fetch("https://api.example.com/products", { cache: "no-store" }).then(res => res.json());
  return (
    <div>
      {products.map(p => (
        <ProductCard key={p.id} product={p} />
      ))}
    </div>
  );
}

// Client Component للجزء التفاعلي فقط
"use client";
import { useState } from "react";

function ProductCard({ product }) {
  const [liked, setLiked] = useState(false);
  return (
    <div onClick={() => setLiked(!liked)}>
      {product.name} {liked ? "❤️" : "♡"}
    </div>
  );
}

هنا الصفحة الأساسية عبارة عن Server Component
لكن الجزء التفاعلي (زرار القلب ) هو اللي Client Component،
وده الصح

---

خلاصة الكلام ​

كل ما تقلل استخدام "use client"
هتلاحظ إن:
الأداء بيزيد
التحميل أسرع
السيو أقوى
خليك دايمًا ذكي في استخدام "use client" - خليه Selective مش Default

---

نقطة أخيرة مهمة ​

لو المشروع كله بقى Client Components،
يبقى كده إنت فعليًا مش بتستخدم مميزات Next.js 14 ولا React Server Components.
استغل السيرفر في عرض البيانات، وسيب المتصفح للحاجات التفاعلية بس

---

كود إضافي لاختبار الفرق ​

جرب بنفسك الفرق بين Server وClient Components:

// Server Component
export default async function Users() {
  const users = await fetch("https://jsonplaceholder.typicode.com/users").then(r => r.json());
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

// Client Component
"use client";
import { useState } from "react";

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

الفرق واضح جدًا لما تفتح DevTools وتشوف السرعة

---

الخلاصة ​

• "use client" مش عدوك، بس استخدمها في مكانها الصح.
• كل ما تخلي الصفحة Server Component أكتر → أداء وسيو أعلى.
• خلي Client Components بس للأجزاء اللي فيها تفاعل مباشر.

كده هتخلي مشروعك Next.js سريع، نظيف، ومتوافق مع محركات البحث بأعلى كفاءة