שתי פעולות Fetch במקביל

חלק מהיחידה היסודות של 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.all מתחיל להמתין, שתי הטעינות כבר מתבצעות. הוא נפתר למערך של תוצאות, בסדר שבו ציינת אותן.

כלל אצבע:

טעינה אחת זקוקה לתוצאה של השנייה ← awaitים ברצף, אין דרך לעקוף זאת
הן בלתי תלויות ← 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>
    );
}