أخطاء استخدام 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)، وده بيأثر على ٣ حاجات مهمة جدًا:

1️⃣ الأداء بيقل - لأن المتصفح بيعمل كل الشغل بنفسه.
2️⃣ التحميل بيطول - خصوصًا في الصفحات اللي فيها بيانات كتير.
3️⃣ الـ 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 سريع، نظيف، ومتوافق مع محركات البحث بأعلى كفاءة 🔥