Magdy Atef Zahran

❌ غلطة شائعة بيقع فيها 90٪ من مبرمجين Next.js 🤦‍♂️

لو بتحط “use client” في أول كل فايل React في مشروع Next.js… فإنت كده بتقتل أهم ميزة في نيكست حرفيا 💀

طيب ليه..؟

لأنك لما تكتب “use client” إنت بتقول لنيكست:

“سيب السيرفر… وشغل الكود ده كله في المتصفح”

وده معناه إن:

الصفحة كلها بقت Client-Side Rendered.. فتحميل البيانات والأداء هيقل وبالتالي الـ SEO هيقل.

وساعتها نيكست هتبقي زيها زي React عادي 👀

طيب إمتى أستخدم “use client”..؟

لما الكومبوننت يكون فيه:

Interactivity (زرار، input، state).
Hooks مثلا زي useState او useEffect.
أو اي تعامل مباشر مع الـ DOM.

يعني مثلا لو الكومبوننت فيه form أو modal أو dropdown يبقي استخدم “use client” عادي, لكن لو بيعرض بيانات بس يبقي خليه Server Component

مثال عملي:

هيعمل فيتش في البروزر فـ وقت تحميل هيبقى أطول والـ SEO هيضعف.

"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> ); }

هنا الصفحة الأساسية Server Component لكن الكومبوننت (ProductCard) هو اللي Client… وده الصح

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