الجلب المسبق للمسار في Next.js

كيف يعمل Next.js على تسريع عمليات الانتقال باستخدام الجلب المسبق للمسار وكيفية تخصيصه.

ميليكا ميهاجليا

ما الذي ستتعلمه؟

سوف تتعلم في هذه المشاركة طريقة عمل التوجيه في Next.js، وكيف يتم تحسينه للسرعة، وكيفية تخصيصه ليلائم احتياجاتك على أفضل وجه.

المكوِّن <Link>

في Next.js، لا تحتاج إلى إعداد التوجيه يدويًا. يستخدم Next.js التوجيه المستند إلى نظام الملفات، ما يتيح لك إنشاء الملفات والمجلدات داخل دليل ./pages/:

للربط بصفحات مختلفة، يمكنك استخدام المكوِّن <Link> على غرار الطريقة التي تستخدم بها عنصر <a> القديم الجيد:

<Link href="/margherita">
  <a>Margherita</a>
</Link>

عند استخدام المكوِّن <Link> في التنقّل، يقدّم لك Next.js المزيد من المهام نيابةً عنك. عادةً، يتم تنزيل الصفحة عند اتباع رابط يؤدي إليها، ولكن Next.js يجلب تلقائيًا ملف JavaScript المطلوب لعرض الصفحة.

عند تحميل صفحة تحتوي على بضعة روابط، من المرجّح أنّه في الوقت الذي تتابع فيه رابطًا، يكون قد تم استرجاع المكوّن الكامن وراءها. ويساعد ذلك في تحسين سرعة استجابة التطبيق من خلال زيادة سرعة الانتقال إلى الصفحات الجديدة.

في مثال التطبيق أدناه، ترتبط صفحة index.js بـ margherita.js باستخدام <Link>:

استخدِم "أدوات مطوري البرامج في Chrome" للتأكّد من أنّه تم جلب margherita.js مسبقًا: 1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة .

1. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".

2. انقر على علامة التبويب الشبكة.

3. ضع علامة في مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.

4. إعادة تحميل الصفحة

عند تحميل index.js، تعرض علامة التبويب الشبكة أنّه تم أيضًا تنزيل "margherita.js":

كيفية عمل الجلب المُسبَق التلقائي

يجلب Next.js مسبقًا الروابط التي تظهر في إطار العرض فقط ويستخدم Intersection Monitorer API لاكتشافها. وتوقِف أيضًا الجلب المُسبَق عندما يكون الاتصال بالشبكة بطيئًا أو عند تفعيل Save-Data للمستخدمين. استنادًا إلى عمليات الفحص هذه، يُدخِل الملف Next.js علامات <link rel="preload"> ديناميكيًا لتنزيل مكوّنات من أجل عمليات التنقّل اللاحقة.

يعمل Next.js على جلب JavaScript فقط، ولا ينفّذه. وبهذه الطريقة، لا يتم تنزيل أي محتوى إضافي قد تطلبه الصفحة التي تم جلبها مسبقًا إلى أن تنتقل إلى الرابط.

تجنُّب الجلب المُسبَق غير الضروري

لتجنّب تنزيل محتوى غير ضروري، يمكنك إيقاف الجلب المُسبَق للصفحات التي نادرًا ما تتم زيارتها من خلال ضبط السمة prefetch في <Link> على false:

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

في هذا المثال الثاني من التطبيق، تحتوي صفحة index.js على <Link> إلى pineapple-pizza.js مع ضبط prefetch على false:

لفحص نشاط الشبكة، اتبع الخطوات من المثال الأول. عند تحميل index.js، توضّح علامة التبويب الشبكة في "أدوات مطوري البرامج" أنّه تم تنزيل margherita.js، إلا أنّه لم يتم تنزيل pineapple-pizza.js:

الجلب المسبق باستخدام التوجيه المخصص

يصلح المكوِّن <Link> لمعظم حالات الاستخدام، ولكن يمكنك أيضًا إنشاء مكوِّن خاص بك لإجراء التوجيه. يسهّل عليك Next.js ذلك من خلال واجهة برمجة تطبيقات جهاز التوجيه المتوفرة في next/router. إذا أردت تنفيذ إجراء (على سبيل المثال، إرسال نموذج) قبل الانتقال إلى مسار جديد، يمكنك تحديد ذلك في رمز التوجيه المخصّص.

عند استخدام مكوّنات مخصّصة للتوجيه، يمكنك إضافة الجلب المُسبَق إليها أيضًا. لتنفيذ الجلب المُسبَق في رمز التوجيه، استخدِم طريقة prefetch من useRouter.

ألقِ نظرة على components/MyLink.js في نموذج التطبيق هذا:

يتم الجلب المُسبَق داخل عنصر الجذب useEffect. في حال ضبط السمة prefetch في <MyLink> على true، يتم جلب المسار المحدّد في السمة href بشكل مسبق عند عرض السمة <MyLink>:

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

عند النقر على الرابط، يتم التوجيه في handleClick. يتم تسجيل الرسالة إلى وحدة التحكم، وتنتقل الطريقة push إلى المسار الجديد المحدد في href:

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

في نموذج التطبيق هذا، تحتوي صفحة index.js على <MyLink> إلى margherita.js وpineapple-pizza.js. تم ضبط السمة prefetch على true في /margherita وعلى false في /pineapple-pizza.

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

عند تحميل index.js، تعرض علامة التبويب الشبكة أنّه تم تنزيل margherita.js وأنّ pineapple-pizza.js لم يتم:

عند النقر على أي من الرابطين، تسجل وحدة التحكم "المتعة مع Next.js." وتنتقل إلى المسار الجديد:

الخلاصة

عند استخدام <Link>، يجلب Next.js تلقائيًا ملف JavaScript المطلوب لعرض الصفحة المرتبطة، ما يزيد من سرعة الانتقال إلى الصفحات الجديدة. إذا كنت تستخدم التوجيه المخصص، يمكنك استخدام واجهة برمجة تطبيقات جهاز التوجيه Next.js لتنفيذ الجلب المسبق بنفسك. تجنَّب تنزيل المحتوى بدون داعٍ من خلال إيقاف الجلب المسبق للصفحات التي نادرًا ما تتم زيارتها.