المكونات غير المتزامنة (Async Components)

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

إليك نتيجة كل ما قمنا بتهيئة الظروف له في الفصل السابق. يمكن لمكون المكونات الخاصة بالخادم (server component) أن يكون 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.

قارن ذلك بالإصدار الخاص بالمتصفح فقط الذي كنت ستكتبه بخلاف ذلك:

تظهر الصفحة فارغة في البداية
يتم إرسال طلب بعد تحميل الصفحة
تتغير بعض الحالات، ويظهر المحتوى، وهو وميض (flicker) يراه المستخدم في كل مرة

مع مكون خادم مصحوب بـ async، لا يوجد عرض أول فارغ. لا يوجد شيء ليرفرف إليه، لأن البيانات كانت موجودة بالفعل عند بناء الـ HTML. لا useEffect، ولا علم تحميل، ولا طلب ثانٍ.

قاعدتان تجعلان هذا أمراً مسموحاً به:

مكونات الـ server فقط هي التي يمكن أن تكون async: المكون الذي يحمل العلامة 'use client' لا يمكنه ذلك
يجب أن تأتي البيانات من مكان يمكن للـ server الوصول إليه: قاعدة بيانات، أو ملف، أو وحدة مثل lib/data.js

التحدي

سهل

تم توفير lib/data.js وهو مقفل. يقوم بتصدير الدالة getDishes()، التي ترجع Promise مصفوفة من كائنات { id, name }.

اجعل Page في app/page.jsx دالة async.
استخدم await getDishes() وتخزين النتيجة في متغير dishes.
داخل <ul id="dish-list">، قم بعرض عنصر <li> لكل dish، مع إضافة key={dish.id} و id={dish.id} وقيمة name الخاصة بالطبق كـ نص له.

لا داعي لـ useEffect، ولا علم تحميل (loading flag)، فقط استخدم await.

جرّب بنفسك

import './globals.css';

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

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