serverPrefetch (serverPrefetch)
هوک «serverPrefetch در ویو (Vue)» فقط در رندر سمت سرور اجرا می شود. «SSR» یعنی ساخت HTML در سرور. این هوک برای گرفتن داده در سرور عالی است. سپس صفحه با داده آماده رندر می شود. مثل وقتی تکالیف را قبل از زنگ کلاس آماده می کنی.
تعریف و کاربرد
serverPrefetch فقط هنگام SSR رخ می دهد. این هوک معمولاً برای fetch داده در سرور است. چون تابعِ async است، اگر Promise برگردانی، سرور تا حل شدن آن صبر می کند.
نمونه کد از منبع
در این نمونه، داده کاربر از API در سرور واکشی و در data ذخیره می شود.
export default {
data() {
return {
data: null
};
},
async serverPrefetch() {
const response = await fetch("https://random-data-api.com/api/v2/users");
this.data = await response.json();
}
};
گام های عملی
- پروژه را با SSR فعال اجرا کن.
- serverPrefetch را در کامپوننت بنویس.
- داده را بگیر و در state ذخیره کن.
- در کلاینت، خروجی آماده را نمایش بده.
نکته ها و هشدارها
نکته: پاسخِ سنگین را کش کن تا درخواست ها کمتر شوند.
هشدار: از window یا document در سرور استفاده نکن. خطا می گیری.
پیوندهای مرتبط
برای خروج موقت کش: deactivated. برای ورود مجدد کش: activated.
منابع بیرونی: W3Schools: serverPrefetch، W3Schools: Asynchronous JavaScript.
جمع بندی سریع
- serverPrefetch فقط در SSR اجرا می شود.
- داده را قبلِ رندر سرور می گیرد.
- تابع async است و Promise می پذیرد.
- سرور منتظر حل Promise می ماند.
- در سرور سراغ API امن برو.