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 sunucu 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)

Asenkron bir sunucu bileşeniyle ilk boş oluşturma gerçekleşmez. Titreşip geçiş yapacağı hiçbir şey yoktur, çünkü HTML oluşturulduğunda veriler zaten mevcuttu. useEffect yok, yükleme bayrağı yok, ikinci bir istek yok.

Bunu geçerli kılan iki kural vardır:

Yalnızca sunucu bileşenleri async olabilir: 'use client' ile işaretlenmiş bir bileşen olamaz
Veriler sunucunun erişebileceği bir yerden gelmelidir: bir veritabanı, bir dosya veya lib/data.js gibi bir modül

Görev

Kolay

lib/data.js sağlanmış ve kilitlenmiştir. Bir dizi { id, name } nesnesi için promise döndüren getDishes() işlevini dışa aktarır.

app/page.jsx içindeki Page işlevini bir async işlevi yap.
await getDishes() sonucunu bir dishes değişkenine ata.
<ul id="dish-list"> içinde, her yemek için bir <li> oluştur; key={dish.id}, id={dish.id} ve metin olarak yemeğin name değerini kullan.

useEffect yok, yükleme bayrağı yok; yalnızca await kullan.

Kendin dene

import './globals.css';

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

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