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

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

Milica Mihajlija

ماذا ستتعلم؟

ستتعرّف في هذه المشاركة على طريقة عمل التوجيه في 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 مسبقًا سوى الروابط التي تظهر في إطار العرض ويستخدم تقاطع واجهة برمجة تطبيقات الرصد لرصدها. كما توقِف أيضًا الجلب المُسبَق عندما يكون الاتصال بالشبكة بطيئًا. أو عندما يكون لدى المستخدمين 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 لتنفيذ جلب نفسك مسبقًا. تجنَّب تنزيل محتوى بدون داعٍ من خلال إيقاف الجلب المسبق للصفحات التي نادرًا ما تتم زيارتها.