onServerPrefetch() الجلب المسبق للبيانات على الخادم في SSR
آخر تحديث: 2026-10-22
onServerPrefetch() الجلب المسبق للبيانات على الخادم في SSR
تُنفَّذ onServerPrefetch() أثناء العرض على الخادم فقط: لا يُعرض HTML إلا بعد اكتمالها، وتُستخدم للجلب المسبق للبيانات غير المتزامنة في مرحلة SSR.
| المجموعة | خطافات دورة الحياة |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
onServerPrefetch(async () => {
store.items = await fetchItems()
})⚙️ الوسائط
| callback | يمكن أن تُعيد Promise، وينتظرها SSR حتى اكتمالها |
|---|
القيمة المُرجعة：Promise أو undefined
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Shows the notice — the hook only runs under SSR.💡 نقاط مهمة
ℹ️ ملاحظة للخدمة في سيناريوهات SSR فقط: التطبيقات أحادية الصفحة الصرفة (Vite SPA) لا تحتاجها.
💡 نصيحة تُستخدم مع مخزن Pinia/Vuex للجلب المسبق للبيانات، وهي الطريقة القياسية للـ SSR اليدوي خارج Nuxt.
⚠️ تحذير لا تصل داخلها إلى DOM: فالخادم لا يملك DOM، والوصول إليه يُخطئ مباشرة.
🏷️ خطافات دورة الحياة ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل تحتاج إليها مشاريع SPA؟
ج لا حاجة، إذ تُنفَّذ فقط في سير العرض على الخادم (SSR/SSG).
س هل تُنقل البيانات إلى العميل؟
ج نعم: تُسلَّم حالة الخادم إلى العميل لإعادة استخدامها عبر useSSRContext/التسلسل والترطيب (hydration).
س هل يمكن تنفيذ عدة طلبات بالتوازي؟
ج نعم، تنتظر خطافات onServerPrefetch لمختلف المكوّنات بالتوازي، ويُفضَّل اقترانها بأغلفة مثل useAsyncData.
