التحميل المسبق (Preloading)

الدرس 29 من 34 · دورة TanStack Router الكاملة · 7 دقيقة و21 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

مستودع الكود لهذا الدرس

الفرع: preloading

[00:01] تقسيم الكود، فلنتحدّث أيضًا عن التحميل المسبق (preloading). وهذا شيء قد يكون مألوفًا لك أيضًا في أُطر (frameworks) أخرى، إذا سبق أن عملتَ مع Next.js مثلًا.

[00:12] وهو هذا الموضع الذي سيقوم فيه الموجّه (router) بتحميل الكود والبيانات الخاصة بالمسار قبل أن ينتقل إليه المستخدم فعليًا، بحيث عندما ينتقل المستخدم فعليًا فإنّها ستُحمَّل بأسرع ما يكون. فإذا كانت لَدَينا بعض

[00:26] الروابط مثلًا هنا في قائمتنا، ونتوقّع أن يزور المستخدم أحد هذه الروابط، فقبل أن ينقر المستخدم على الرابط حتى، سيقوم الموجّه بتحميل البيانات والكود الخاص بهذا المسار مسبقًا، بحيث عندما ينقر — عندما

[00:40] ينقر المستخدم فعليًا — فسيكون الأمر شبهَ فوريّ، ويحدث ذلك بعدة طرائق.

[00:46] إحداها بالتحويم: بمجرّد التحويم فوق رابط، فربّما يُعدّ من المأمون أن نفترض أنّ المستخدم سينقر على هذه الروابط. فأول ما يتحوّم المستخدم، يمكننا التحميل المسبق. ويمكن أيضًا فعل ذلك لكلّ الروابط في صفحةٍ معيّنة. إذًا

[00:59] عندما نزُر مسارًا معيّنًا، فإنّ أيّ رابطٍ موجود في هذا المسار يمكننا تحميل كودِه وبياناتِه مسبقًا. وثمة طريقة أخرى ألا وهي ظهور رابطٍ في نافذة العرض (viewport). فإذا كنت

[01:14] تمرّر داخل مسارٍ وظهر رابطٌ دون أن تتحوّم فوقه حتى، فسنقوم فقط بتحميل بيانات المسار الذي يشير إليه هذا الرابط مسبقًا. فلنرَ ذلك قيد العمل. فلنتوجّه إلى رابط about هذا. تذكّر أنّ هذا كان يقطُن في مسار الجذر (root route) لَدَينا. وهنا، في رابط about

[01:32] وهو هذا، يمكننا إضافة هذه الخاصية preload ولها قيم: intent أو render أو viewport. وقيمة intent تعني أنّ كود المسار سيُحمَّل عند التحويم فوق هذا الرابط. فلنُعطه تحديثًا للصفحة ربّما. فلن

[01:51] نفرّغ شبكتنا، ولنحوّم فقط فوق about هنا. وكما ترى، كود about تحمّل. وهذا طبعًا بافتراض أنّنا نُمكّن تقسيم الكود ونحتاج إلى تحميل مكوّن المسار، أو إذا كانت لَدَينا

[02:06] بياناتٌ في هذا المسار داخل دالة المُحمِّل، فستعمل دالة المُحمِّل أيضًا وستُحمَّل البيانات مسبقًا هي أيضًا. فلنجرب ذلك فعليًا ربّما هو أيضًا لمجرّد توضيح هذا.

[02:17] فلنجربها في مسار posts.

[02:19] ‏posts.index.tsx.

[02:21] وفي هذه الروابط، فلنتوجّه إلى هذا المسار هنا.

[02:25] إذًا، ‏/posts.

[02:27] ولهذه الروابط، فلنفرّغ تبويب الشبكة لَدَينا. ولنضِف لهذه الروابط — عذرًا — preload intent هذا كذلك.

[02:38] ولنفرّغ شبكتنا. ولنحوّم. وكما ترى، تحمّلت كلّ المكوّنات: مكوّن عدم العثور، ومكوّن الخطأ، والمكوّن الرئيسي، وما إلى ذلك، بالإضافة إلى

[02:52] طلبات الشبكة إلى جلب التدوينة والتعليقات كذلك. فكلّ ما كان لَدَينا في دالة المُحمِّل تحمّل مسبقًا كذلك أيضًا. غير أنّه لدينا خيار آخر. فلنقل ربّما فلنبقِ الأمر بسيطًا و

[03:08] نجرّبه هنا في الصفحة الرئيسية (homepage). لنفرّغ كلّ شيء، وفي مسار الجذر فلنغيّر رابط about — الـ preload الخاص برابط about — من intent إلى render، وrender يعني أنّ مجرّد وجود هذا الرابط في الصفحة يجعله

[03:25] مُحمَّلًا مسبقًا عندما نزُر المسار. فإذا حدّثنا الآن ونظرتَ هنا في مكانٍ ما، فسنجد مسار about لدينا محمَّلًا. وهنا هو. وكما ترى، امتلكنا ملف about.tsx محمَّلًا. فالآن إذا فرّغنا شبكتنا

[03:44] فلا سيُحمَّل شيء، لأنّه محمَّل أصلًا عندما زُر مسار home الذي يحتوي رابط about وهو موجودٌ هنا فقط دون الحاجة إلى التحويم عليه حتى. سيتحمّل مسبقًا. أما الخيار

[04:00] الآخر المتاح لَدَينا فهو viewport. وهنا سيُحمَّل المسار مسبقًا عندما يظهر الرابط في نافذة العرض.

[04:07] ولهذا سأضيف في مكانٍ ما هنا — لنقل — ربّما قبل هذا التنقّل، سأضيف وسم div كبيرًا جدًا هنا فقط حتى أستطيع التمرير. وبعد ذلك، هنا، سأضيف viewport كقيمة للـ

[04:24] preload.

[04:26] الآن، لنحفظ هذا. لنُحدّث.

[04:28] لنفرّغ شبكتنا. ولنواصل التحميل — عذرًا، التمرير. وطالما ظهر رابطنا في تبويب الشبكة، فسيكون لَدَينا طلبنا الخاص بـ about كما ترى هنا. غير أنّه طبعًا لن نضطر إلى إضافة

[04:44] خاصية preload لكلّ روابطنا. يمكننا — لنُزِل هذا في الواقع. ولنُزِل كذلك الذي أضفناه في posts index.

[04:53] وما يمكننا فعله هو التوجّه إلى ملف main.tsx لَدَينا. وعندما نُعرّف موجّهَنا، يمكننا تحديد خيارٍ هنا وهو defaultPreload. فـ defaultPreload، وكلّ ما سنُحدّده هنا سينطبق على كلّ روابطنا.

[05:11] فإذا أضفنا الـ intent هنا — لنُزِل أيضًا — عذرًا — وسم div هذا الذي أضفناه.

[05:20] والآن، حتى دون امتلاك الخاصية preload على الرابط، عندما نحوّم فوقه فسيُحمَّل. وبالنسبة إلى أيّ رابطٍ لَدَينا — فلنجرب posts.

[05:30] إذا حوّمت فوق أيّ تدوينة، فسنحصل على بيانات وملفّات هذا المسار محمّلةً مسبقًا. ولدينا أيضًا خيارٌ هنا وهو defaultPreloadDelay. فـ defaultPreloadDelay. هذا، إذا أردتَ إضافة تأخير

[05:49] قبل تحميل بياناتك مسبقًا. فعندما تحوّم — لنقل أنّك تودّ الانتظار ربّما ثانيةً قبل التحميل المسبق للبيانات — يمكنك تحديد ذلك هنا. إذًا لنحفظ. فلنحوّم فوق about. وكما ترى، سيتعين عليك

[06:01] التحويم لثانيةٍ كي تُحمَّل بياناتك مسبقًا.

[06:05] إذا — لنحدّث مرةً أخرى ربّما — وتحوّمنا مجرّدًا أقلَّ من ثانية، فلن يُحمّل مسبقًا. وذلك ربّما شيءٌ آخر تودّ القيام به لتفادي التحميل المسبق غير الضروري.

[06:19] وبعض الخيارات الأخرى التي يمكنك ضبطها هنا خياراتٌ لها علاقة بالذاكرة المؤقتة (caching). فعندما نُحمّل مسارًا ما مسبقًا. فلنقل — لنحدّث هنا. فلنحوّم فوق about ربّما.

[06:31] والآن، وكما ترى، تحمّل مسبقًا. وإذا حوّمنا فوقه مرةً أخرى فلن يُحمّل مسبقًا من جديد حتى يمرّ قدرٌ معيّن من الزمن. فسوف يُحفَظ في الذاكرة المؤقتة لبعض الوقت. ويمكننا التحكّم في هذه الذاكرة المؤقتة باستخدام defaultPreload

[06:45] MaxAge هنا، وهي 30 ثانية افتراضيًا. وبعد 30 ثانية، ستُزال أيّ مساراتٍ مُحمّلةً مسبقًا مخزَّنةً في الذاكرة المؤقتة. ويمكننا كذلك التحكّم في المدة التي تُعتبر فيها البيانات المُحمّلة مسبقًا طازجةً باستخدام هذه الخيارات: defaultPreload

[07:02] StaleTime في createRouter لدينا عندما نُعرّف موجّهَنا، أو preloadStaleTime إذا أردتَ تحديد هذا الخيار لمسارٍ معيّن لا لكلّ مساراتنا. لكن دعنا لا ندخل بعمقٍ مبالغ فيه، لأنّه في الواقع في

[07:17] القسم التالي سنتحدث عن الذاكرة المؤقتة عمومًا في TanStack Router.