مقدمه
این پست توسط Next.js حمایت مالی می شود … اما به روشی متفاوت. پس از چند ساعت اتصال به نقاط مناسب درست پس از حمل و نقل ویژگی میان افزار در تولید و بازگشت سریع
در مورد بیشتر Devs نمی دانم اما برای من “شوکه کننده” بود. خدمات ما بلافاصله پس از ادغام اولیه من افزایش یافت. این تقریباً افزایش 2 برابر یا 3 برابر بود. به سادگی توسط پرونده میان افزار ایجاد می شود.
یک گوتچا وجود دارد که می خواهم در همان ابتدای این مقاله به آن اشاره کنم. چنین “مسائل” در دسترس است برنامه تولید فقط ساختبشر منظور من پیوند “ویژگی” پیوند در روتر صفحات V14 بعدیبشر کمی دست و پا گیر و خوب است که از قبل بدانید.
فقط برای تجسم این برای شما – نیازی به تشکر نیست
لایه 1 – پیوند پیوند
من آن را یک پیشگفتار در سطح مبتدی می نامم.
یکی از خصوصیات لینک است prefetchبشر
شما می توانید یک بسته بندی ساده در اطراف ایجاد کنید Link جزء ، مانند a CustomLink, و از این رفتار خودداری کنید. کل منطق تنظیم است prefetch: false به عنوان مقدار پیش فرض در مؤلفه خود و سپس تمام استفاده از پیش فرض را جایگزین کنید Linkبشر
import Link from 'next/link'
export const CustomLink = ({prefetch = false, ...props}) => {
return (
)
}
این همه نیست! یک رفتار متفاوت به این بستگی دارد که آیا شما از آن استفاده می کنید app یا pages دایرکتوری
برای pages مسیریابی prefetch دارای a true مقدار به طور پیش فرض در V15 بعدی. تنظیم کاذب خوب کار خواهد کرد اما یک سلب مسئولیت دیگر وجود دارد. پیش تنظیم رفتار در شناور نمی تواند با آن غیرفعال شود next/linkبشر
توجه: البته ، می توانید از بومی استفاده کنید
برچسب را برای غیرفعال کردن پیش تنظیم کامل انجام دهید اما این فقط برای پیوندهای خارجی کار می کند.
برای app مسیریابی دایرکتوری ما null مقدار به طور پیش فرض
باز هم ، این ممکن است خیلی سریع منسوخ شود ، بنابراین حتماً اسناد رسمی را بررسی کنید
لایه 2 – میان افزار
من مکان دیگری پیدا کرده ام که می توانید درخواست های پیش فرض میان افزار را به سرور به حداقل برسانید. در پیکربندی Middleware خود!
یک ویژگی عالی تطبیق وجود دارد که می توانیم درخواست ها را با عنوان های پیش نمایش حذف کنیم. بیایید قطعه کد را در زیر در نظر بگیریم:
{
source:
'/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
missing: [{ type: "header", key: "purpose", value: "prefetch" }],
},
توضیح گام به گام:
- توجه داشته باشید که regexp یک نفی است
- این برای مسیرهای بالقوه ذکر نشده مانند صفحات ما کار خواهد کرد
- به طور معمول این با هر دو درخواست پیش تنظیم و غیر پیش نویس مطابقت دارد ، اما ما یک الزام را اضافه کرده ایم که فقط با کسانی که بدون هدر “prefetch” هستند مطابقت داشته باشیم.
این کار بسیار خوب است ، به جز یک مورد دیگر – پیش نمایش در شناور. اگر با آن خوب هستید ، احتمالاً می توانید در اینجا مکث کنید.
لایه نهایی 3 – تجربی middlewarePrefetch پرچم
ممکن است تعجب کنید – چرا Prefetch فقط اختیاری نیست ، درست است؟ خوب ، شما می توانید اما ما نیاز به نگاه دقیق تر به کد منبع داریم.
https://github.com/vercel/next.js/pull/42936
Middleware با 2 گزینه prefetch همراه است – strict وت flexibleبشر مورد دوم به طور پیش فرض تنظیم شده است و “همیشه prefetches” است. در حالی که اولین مورد فقط “هنگامی که HREF صریحاً با یک مسیر SSG مطابقت دارد” را ترجیح می دهد که باید خوب باشد که سایتهای تولید شده استاتیک را پیش بینی کنید.
توجه: اگر هنوز از آن استفاده می کنید ، پیش نویس های کاملاً غیرفعال دارید
getInitialPropsبشرتوجه: اگر فقط چند سایت استاتیک دارید ، احتمالاً نیازی به پیکربندی گزینه 2 برای حذف پیش نویس ها ندارید. این نباید بار زیادی روی سرورهای شما ایجاد کند.
چرا تمام بار موجود در سرور ما را ایجاد می کند
جواب ساده است ، با middleware پرونده ای که ما برای کلیه درخواست های خود مانند تصاویر ، پیش نویس ها و صفحات که به عنوان بار اضافی رفتار می شوند ، عملیات اضافی را انجام می دادیم. این زمان و منابع طول می کشد تا برنامه ما مقیاس شود.
بزرگ ناشناخته
من نمی توانم درک کنم که چرا Prefetch هنگام استفاده از پرونده Middleware NextJS اتفاق نمی افتد. بدون آن ، این رفتار کاملاً طبیعی است. به نظر می رسد middleware به طور مستقیم با این ویژگی در ارتباط است و از نقطه قبلی بار ذکر شده است.
خلاصه
آنجاست 3 لایه برای جلوگیری از prefetch هنگام استفاده از میان افزار. می توانم بگویم که شما ممکن است با گزینه 2 بدون هیچ مشکلی زندگی کنید اما خوب است بدانید که چگونه می توانید “prefetch” را به طور کامل خاموش کنید.
همچنین ، من می توانم لایه 3 را به عنوان بخشی از اسناد ببینم. من باید در مورد برخی از روابط عمومی برای آن فکر کنم
