جلب البيانات مرتين في وقت واحد

جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 25 من 47.

عادةً ما تحتاج الصفحة إلى أكثر من شيء واحد. الطريقة البديهية لكتابتها هي أيضًا الطريقة البطئية:

const dishes = await getDishes();   // 60ms
const drinks = await getDrinks();   // 60ms، يبدأ فقط الآن
// الإجمالي: 120ms

await تعني توقف هنا. عملية التحميل الثانية لا تبدأ حتى تنتهي الأولى تمامًا، على الرغم من أنها لم تكن بحاجة أبدًا إلى نتيجة الأولى.

ابدأهما معاً، ثم انتظر كليهما:

const [dishes, drinks] = await Promise.all([
    getDishes(),
    getDrinks(),
]);
// الإجمالي: 60ms

الخدعة تكمن في التوقيت. استدعاء getDishes() بدون await يبدأ العمل ويعيد وعدًا (promise) على الفور، لذا ببلوع الوقت الذي يبدأ فيه Promise.all بالانتظار، يكون كلا الـ loads قيد التشغيل بالفعل. ويتم حلّه إلى مصفوفة من النتائج، بالترتيب الذي أدرجته.

القاعدة الذهبية:

تحميل واحد يحتاج إلى نتيجة الآخر ← استخدام awaits بشكل متتالي، لا يوجد خيار آخر
إنها independent ← استخدام Promise.all

تحميلان هما إنجاز صغير. أما خمسة تحميلات فهي الفارق بين صفحة تشعر أنها فورية وأخرى لا تشعر بذلك.

التحدي

سهل

يقوم app/page.jsx بتحميل المأكولات والمشروبات واحداً تلو الآخر. لا توجد علاقة بينهما، لذا قم بتشغيلهما معاً.

استبدل عمليتي await المتسلسلتين بعملية await Promise.all([...]) واحدة، مع تفكيك النتيجة إلى dishes و drinks.

الملف lib/data.js مغلق، ويراقب ما إذا كان التحميلان قد تداخلا. يجب أن ينتهي الأمر بـ #report لقراءة Ran together بدلاً من Ran one at a time.

جرّب بنفسك

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}