جلب البيانات

جلب البيانات في مكوّن خادم

في Next.js نستخدم async/await مباشرة داخل المكوّن — بلا useEffect:

async function Products() {
  const res = await fetch("https://api.example.com/products");
  const products = await res.json();

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

بسيط ونظيف، ويُنفَّذ على الخادم فلا يصل مفتاح الـ API للمتصفّح.

التصيير الساكن مقابل الديناميكي

التحكّم في التخزين المؤقت (Caching)

// مخزّن مؤقتًا (الافتراضي — ساكن)
fetch(url);

// بلا تخزين — ديناميكي عند كل طلب
fetch(url, { cache: "no-store" });

// إعادة التحقّق كل 60 ثانية
fetch(url, { next: { revalidate: 60 } });

التوليد الساكن لمسارات ديناميكية

generateStaticParams يبني صفحات لكل عنصر مسبقًا:

export function generateStaticParams() {
  return [{ slug: "post-1" }, { slug: "post-2" }];
}

💡 هذا ما يجعل صفحات مثل دروس The Code Fix سريعة وممتازة للـ SEO — كلها مبنية مسبقًا كـ HTML ساكن.

🎯 التالي: النشر على Vercel.