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

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

Milica Mihajlija

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

تنبيه: تتضمّن هذه الصفحة عروضًا توضيحية تالفة، لأنّ Glitch توقّف عن استضافتها.

المكوِّن <Link>

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

لإنشاء روابط تؤدي إلى صفحات مختلفة، استخدِم المكوّن <Link>، تمامًا كما تستخدم العنصر القديم <a>:

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

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

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

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

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

1. افتح "أدوات مطوّري البرامج في Chrome".
2. انقر على علامة التبويب الشبكة.
3. ضَع علامة في مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.
4. إعادة تحميل الصفحة

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

طريقة عمل ميزة "الجلب المسبق التلقائي"

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

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

تنبيه: يتم تشغيل أمثلة Glitch في وضع الإنتاج لأنّ الجلب المُسبَق يعتمد على شروط التصفّح ولا يتم تفعيله إلا في إصدارات الإنتاج المحسَّنة. للانتقال إلى وضع التطوير، اطّلِع على README.md في أمثلة Glitch.

ملاحظة: بما أنّ طلبات <link rel="preload"> تسترجع الموارد بأولوية عالية، يتوقّع المتصفّح استخدامها على الفور، ما يؤدي إلى ظهور تحذيرات في "وحدة التحكّم". تتوفّر ميزة أولوية الجلب في Chrome، ما سيسمح لإطار عمل Next.js بالإشارة إلى أولوية أقل للموارد التي لا تكون مطلوبة على الفور باستخدام <link rel="preload" fetchpriority="low">.

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

لتجنُّب تنزيل محتوى غير ضروري، يمكنك إيقاف ميزة الجلب المسبق للصفحات التي نادرًا ما تتم زيارتها من خلال ضبط السمة 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 هذه العملية من خلال واجهة 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:

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

الخاتمة

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