Next.js • المستوى الثاني • الدرس 2

جلب البيانات في مكونات الخادم (Data Fetching in Server Components)

أهداف الدرس العلمية

استخدام async/await مباشرة داخل دالة المكون لتشغيلها على السيرفر.
توفير أمان عالي للبيانات وتمرير HTML جاهز للمتصفح لتحسين الـ SEO.
الاستغناء عن useState و useEffect لجلب البيانات.
فهم مزايا Server Components في الأداء والأمان.

1. جالب البيانات المباشر

تسمح لك Next.js بجلب البيانات مباشرة في السيرفر دون إرسال كود جافاسكريبت المخصص للجلب إلى متصفح العميل، مما يجعل الصفحة أسرع وأكثر أماناً.

javascript

// ✅ Server Component — جلب مباشر بدون useState/useEffect
export default async function UsersPage() {
  const res = await fetch('https://api.example.com/users');
  const users = await res.json();

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

2. Server Component vs Client Component

🖥️ Server Component

• async function مباشرة
• await fetch داخل المكوّن
• لا يحتاج useEffect
• أسرع + آمن + SEO

⚡ Client Component

• يحتاج 'use client'
• يستخدم useEffect + fetch
• يدير حالة التحميل
• للتفاعل مع المستخدم

التطبيق العملي المباشر

تحدي الدرس الثاني: عرض البريد الإلكتروني

قم بالتعديل على الكود في المحرر أدناه:

أضف حقل البريد الإلكتروني u.email بعد اسم المستخدم في القائمة.
افصل بين الاسم والبريد بشرطة —.
اجعل البريد بلون رمادي فاتح وحجم خط أصغر (اختياري).

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الثالث