Next.js Data Fetching جلب البيانات في Next.js

آخر تحديث: 2026-11-03

Next.js Data Fetching جلب البيانات في Next.js

في مكوّن خادمي من Next.js تستطيع انتظار fetch مباشرةً، ويتحكّم next.revalidate باستراتيجية التخزين المؤقت: فـ SSG و ISR و SSR جميعها تُعبَّر عبر ذات الواجهة. والتخزين المؤقت هو السلوك الافتراضي، لذا فهم الاستراتيجيات هو ما يتيح لك الموازنة بين السرعة وحداثة البيانات دون التضحية بأي منهما.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

// Fetch directly inside a server component (no useEffect needed)
const res = await fetch('https://api.example.com/posts', {
  next: { revalidate: 60 }   // ISR: cached for 60 seconds
})
const posts = await res.json()

// Other strategies:
// next: { revalidate: 0 }   → SSR: fetched fresh on every request
// cache: 'no-store'         → no caching at all (same as SSR)
// no options at all         → SSG: fetched once at build time
// next: { tags: ['posts'] } → tagged, so revalidateTag can invalidate it precisely

⚙️ المعاملات

القيمة المرجعة：لا قيمة مرتجعة — تُجلَب البيانات على الخادم؛ والاستراتيجيات موصوفة في بناء الجملة والمثال.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

محاكاة: انقر أزرار SSG / ISR / SSR لتبديل الاستراتيجيات؛ وتعرض اللوحة السفلية خيار revalidate المطابق وحداثة البيانات (لقطة وقت البناء، أو أقدم بـ 60 ثانية على الأكثر، أو مباشرة) وملاحظة موجزة عن حالة الاستخدام، ما يسهّل مقارنة المقايضة بين السرعة والحداثة.

💡 النقاط الأساسية

🏷️ المزيد من المنظومة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن