רכיבים אסינכרוניים

חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 23 מתוך 47.

הנה התמורה לכל מה שהפרק הקודם הכין. רכיב שרת יכול להיות async:

import { getDishes } from '../lib/data';

export default async function Page() {
    const dishes = await getDishes();

    return <h1>{dishes.length} dishes</h1>;
}

קרא את זה שוב, כי זה באמת חדש. הרכיב ממתין. Next.js מריץ אותו בשרת, מאפשר ל-await להסתיים, ורק אז הופך את התוצאה ל-HTML.

השווה זאת לגרסה שפועלת רק בדפדפן, שאחרת היית כותב:

הדף מוצג תחילה ריק
בקשה נשלחת אחרי שהדף נטען
מצב כלשהו משתנה, והתוכן מופיע — הבהוב שהמשתמש רואה בכל פעם

ברכיב שרת אסינכרוני אין רינדור ריק ראשוני. אין שום דבר שאפשר להבהב לתוכו, כי הנתונים כבר היו שם כשנבנה ה-HTML. אין useEffect, אין דגל טעינה, ואין בקשה שנייה.

שני כללים הופכים את זה לחוקי:

רק רכיבי שרת יכולים להיות async: רכיב שמסומן ב-'use client' לא יכול
הנתונים חייבים להגיע ממקום שהשרת יכול לגשת אליו: מסד נתונים, קובץ או מודול כמו lib/data.js

אתגר

קל

lib/data.js מסופק ונעול. הוא מייצא את getDishes(), שמחזירה הבטחה למערך של אובייקטים מסוג { id, name }.

הפוך את Page שבקובץ app/page.jsx לפונקציית async.
השתמש ב-await getDishes() כדי להציב את התוצאה במשתנה dishes.
בתוך <ul id="dish-list">, הצג רכיב <li> אחד לכל מנה, עם key={dish.id}, עם id={dish.id} ועם ה-name של המנה כטקסט שלו.

בלי useEffect, בלי דגל טעינה, רק await.

נסו בעצמכם

import './globals.css';

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

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