Asekron Bileşenler

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası — ders 23 / 47.

İşte son bölümün hazırladığı her şeyin karşılığı. Bir server bileşeni async olabilir:

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

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

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

Bunu tekrar okuyun, çünkü bu gerçekten yeni. Bileşen bekler. Next.js bunu sunucuda çalıştırır, await işleminin tamamlanmasına izin verir ve ancak o zaman sonucu HTML'e dönüştürür.

Bunun yerine yazacağınız yalnızca tarayıcıya özel sürümle karşılaştırın:

Sayfa ilk olarak boş şekilde işlenir
Sayfa yüklendikten sonra bir istek gönderilir
Bazı durumlar değişir ve içerik görünür; bu, kullanıcının her seferinde gördüğü bir yanıp sönmedir (flicker)

Async bir server component ile ilk boş render gerçekleşmez. Titreyerek dönüşecek hiçbir şey yoktur, çünkü HTML oluşturulduğunda data zaten oradaydı. useEffect yok, yükleme bayrağı yok, ikinci bir istek yok.

İki kural bunu geçerli kılar:

Yalnızca server bileşenleri async olabilir: 'use client' olarak işaretlenmiş bir bileşen olamaz
Verilerin sunucunun erişebileceği bir yerden gelmesi gerekir: bir database, bir file veya lib/data.js gibi bir modül

Görev

Kolay

lib/data.js dosyası sağlanmış ve kilitlenmiştir. Bu dosya, bir { id, name } nesneleri dizisi için bir promise döndüren getDishes() fonksiyonunu dışa aktarır.

app/page.jsx içindeki Page bileşenini bir async fonksiyon yapın.
getDishes() fonksiyonunu await kullanarak bir dishes değişkenine atayın.
<ul id="dish-list"> içinde, her bir dish için key={dish.id}, id={dish.id} ve metin içeriği olarak dish'in name bilgisini içeren birer <li> render edin.

useEffect yok, yükleme durumu (loading flag) yok, yalnızca await kullanın.

Kendin dene

import './globals.css';

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

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