تحميل البيانات في الخلفية (Loading Data in the Background)

الدرس 24 من 34 · دورة TanStack Router الكاملة · 4 دقيقة و48 ثانية

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

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

الفرع: loaders-5

[00:01] ما يمكننا فعله كذلك لكي يُحمَّل مسارنا أسرع هو أنّه، بدلًا من انتظار تحميل جميع بياناتنا قبل تصيير مسارنا، يمكننا ببساطة انتظار اكتمال تحميل البيانات المهمّة فقط، ثم تصيير مسارنا، وأن ننتظر بعدها — ربّما —

[00:16] البيانات غير الحرجة (non-critical) كي تتحمّل في الخلفية، ثم نعرضها لاحقًا بعد تصيير مسارنا.

[00:22] إذًا فلنأخذ مثالًا على ذلك — ربّما — هنا في دوالّ التدوينات (posts functions) لدينا. فلنعُد بهذا — أي مهلة الانتظار (time out) هذه — إلى هنا، بحيث تستغرق تعليقاتنا وقتًا أطول ربّما في التحميل مقارنةً بالتدوينة الرئيسية التي نحمّلها هنا عبر getPost.

[00:38] إذًا إذا حدّثنا الصفحة الآن، فسَنحصل هنا على بعض وقت التحميل.

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

[00:57] لاحقًا. فإذًا في هذه الحالة لسنا بحاجة إلى انتظار التعليقات كي نصيّر مسارنا، ويمكننا فعل ذلك ببساطة — عذرًا، ليس هنا؛ في مسار $postId لدينا — بأن نزِيل promise.all الآن وأن نفعل ذلك بطريقة

[01:11] مختلفة. فلنعُد هذا إلى الوضع الذي نحمّل فيه تدويناتنا هكذا. إذًا await، ثم فلننسخ هذا ولنزِل هذا. وما يمكننا فعله أنّنا نستطيع تحميل تعليقاتنا. فلنُعرِّف

[01:29] التعليقات comments، وبدلًا من انتظار تعليقاتنا، يمكننا تمريرها على أنّها وعد (promise). فلنسمِّه بدلًا من ذلك ربّما commentsPromise كي يكون الأمر واضحًا، ونمرّر هنا commentsPromise. فإذًا في هذه الحالة سَنبدأ

[01:46] في تحميل التعليقات. لكننا لن ننتظرها قبل تصيير مسارنا؛ سَننتظر فقط التدوينة — عذرًا، التدوينة — لأنّنا ننتظرها هنا عبر await. وبمجرّد اكتمال ذلك سَنصيّر تدوينتنا بينما

[02:00] تتحمّل هذه في الخلفية.

[02:03] وإذا اكتمل ذلك سَنعرضه بطريقةٍ ما، وسَنرى ذلك الآن بالطبع. فإذًا إذا حفظنا هذا وعدنا إلى مكوّن التدوينة (post component) لدينا، فسَنمتلِك خطأً الآن لأنّ هذا وعدٌ وليس بياناتنا. إذًا

[02:15] نحتاج إلى الحصول على وعد التعليقات (comments promise) من هنا. وبالطبع لا يمكننا الآن المرور على هذا بحلقةٍ (loop) لأنّه وعدٌ وليس بياناتنا؛ فنحتاج إلى انتظار هذا الوعد بطريقةٍ ما في الترميز (markup) لدينا قبل عرض هذا ul الذي

[02:29] يعرض تعليقاتنا. ويمكننا فعل ذلك باستخدام مكوّنٍ يوفّره TanStack Router. لكن فلنذكر شيئًا أولًا. فإذًا لاحظ هنا — عذرًا، ليس هنا؛ في مسارنا — لاحظ أنّني وضعتُ هنا طلب التعليقات هذا

[02:44] أولًا، ثم وضعتُ الطلب الذي ننتظره هنا عبر await. فإذا فعلنا العكس — أي انتظرنا هذا أولًا عبر await ثم جلبنا تعليقاتنا — فسيعمل ذلك أيضًا؛ سَننتظر اكتمال تحميل التدوينة ثم

[02:59] نصيّر مسارنا، وستتحمّل هذه في الخلفية. غير أنّنا لن نبدأ تحميل التعليقات في الخلفية قبل اكتمال تحميل التدوينة، وهذا أمرٌ غير ضروري. وبوضع هذا بعد التعليقات سَنبدأ

[03:10] في تحميل التعليقات في الخلفية، ثم سَنبدأ جلب بيانات التدوينة، وبمجرّد اكتمال ذلك سَنصيّر التدوينة. فإذًا نحن نوفّر بعض الوقت فقط لأنّنا بدأنا هذا مبكّرًا قليلًا.

[03:24] حسنًا. لكن الآن، فلنعد إلى مكوّن التدوينة (post component) لدينا، ولدينا مكوّنٌ يوفّره TanStack Router اسمه await.

[03:34] إذًا في هنا فلنضع مكوّنًا اسمه await يمكننا استيراده من TanStack React Router.

[03:41] وهنا يمكننا تمرير الوعد الذي نحتاج إلى انتظاره عبر await. ففي حالتنا وعد التعليقات (comments promise)، ويمكننا أيضًا تمرير تراجع (fallback) سَيُعرض إلى أن يتحقّق وعدنا بالاستقرار (resolve).

[03:53] فبإمكانك أن تضع أيضًا skeleton وأمورًا نحو ذلك. أما أنا فسأضع ربّما div — عذرًا. فلنضع div هنا مع بعض نصّ التحميل. والآن، عندما يتحقّق وعدنا، سَنحصل على بياناتنا المُحلّولة (resolved data) هنا في دالّة

[04:10] يمكننا تمريرها ضمن children لدينا. فإذًا في هنا يمكننا تمرير دالّةٍ سَتَتضمّن تعليقاتنا هكذا. وبامتلاك تعليقاتنا، يمكننا إرجاع ul لدينا. فإذًا في هنا سَتَتكوّن لَدينا التعليقات. ويمكننا الآن ببساطة نسخ هذا

[04:25] ul من هنا، وقطعه من هنا ووضعه في الداخل هنا هكذا.

[04:32] فإذًا الآن فلنجرّب — ربّما — تحديث الصفحة.

[04:36] وكما ترى، نحصل على تدوينتنا فورًا، ثم تتحمّل التعليقات في الخلفية.

[04:44] فإذًا هذا بالطبع — ربّما — تجربة المستخدم (user experience) أفضل بكثير.