الجلب المسبق للمحتوى في Next.js

كيف يعمل الجلب المسبق في تطبيق Next.js

فيربط صفحتين بـ Next.jsلقد ذكرت كيف أنLinkيمكن استخدام مكون Next.js لإنشاء روابط بين صفحتين ، وعند استخدامه ، يمكن استخدام Next.jsيعالج توجيه الواجهة الأمامية بشفافيةبالنسبة لنا ، لذلك عندما ينقر المستخدم على رابط ، تهتم الواجهة الأمامية بعرض الصفحة الجديدة دون تشغيل طلب عميل / خادم جديد ودورة استجابة ، كما يحدث عادةً مع صفحات الويب.

هناك شيء آخر يقدمه لك Next.js عندما تستخدمهLink.

بمجرد التفاف عنصر داخل<Link>يظهر في منفذ العرض (مما يعني أنه مرئي لمستخدم موقع الويب) ، يقوم Next.js بإعداد عنوان URL الذي يشير إليه مسبقًا ، طالما أنه رابط محلي (على موقع الويب الخاص بك) ، مما يجعل التطبيق فائق السرعة للمشاهد.

يتم تشغيل هذا السلوك فقط فيوضع الإنتاج(سنتحدث عن هذا بالتفصيل لاحقًا) ، مما يعني أنه يجب عليك إيقاف التطبيق إذا كنت تقوم بتشغيلهnpm run dev، قم بتجميع حزمة الإنتاج الخاصة بك معnpm run buildوتشغيلهnpm run startبدلا من.

باستخدام مفتش الشبكة في DevTools ، ستلاحظ أن أي روابط في الجزء المرئي من الصفحة ، عند تحميل الصفحة ، تبدأ في الجلب المسبق بمجردloadتم تشغيل الحدث على صفحتك (يتم تشغيله عند تحميل الصفحة بالكامل ، ويحدث بعد ملفDOMContentLoadedحدث).

اي شيء اخرLinkالعلامة غير الموجودة في منفذ العرض سيتم جلبها مسبقًا عندما يقوم المستخدم بالتمرير ويتم ذلك

يتم الجلب المسبق تلقائيًا في الاتصالات عالية السرعة (اتصالات Wifi و 3g + ، ما لم يرسل المتصفح ملفSave-Dataرأس HTTP.

يمكنك الانسحاب من الجلب المسبق الفرديLinkالحالات عن طريق تعيينprefetchدعم لfalse:

<Link href="/a-link" prefetch={false}>
  <a>A link</a>
</Link>

تحميل مجانيكتيب Next.js

الجلب المسبق للمحتوى في Next.js

كيف يعمل الجلب المسبق في تطبيق Next.js

المزيد من البرامج التعليمية التالية: