الجلب المسبق للمسار في 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. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.

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

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

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

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

آلية عمل ميزة "التحميل المُسبَق التلقائي"

لا يجلب Next.js مسبقًا سوى الروابط التي تظهر في إطار العرض ويستخدم Intersection Observer 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:

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

التخزين المؤقت المُسبَق باستخدام التوجيه المخصّص

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