Yüklenme Durumları

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

Bir async page, ancak en yavaş load işlemi kadar hızlıdır. Next.js beklerken kullanıcı tam olarak neye bakıyor?

Sayfanın yanına bir loading.jsx koyun ve cevap: ne isterseniz o olsun.

app/
    slow/
        page.jsx       the async page
        loading.jsx    shown while it resolves

Default export'a sahip sıradan bir bileşendir ve hiçbir prop almaz:

export default function Loading() {
    return <p>Loading the special…</p>;
}

Onu asla kendiniz render etmezsiniz ve asla import etmezsiniz. Dosyayı page'in yanına bırakmak, o page'i bir Suspense boundary içine sarar: Next.js gezindiğiniz anda loading.jsx dosyasını gösterir, await'ler bittiğinde gerçek page ile değiştirir ve etraftaki düzen asla göz kırpmaz.

Dosyanın nerede bulunduğundan iki sonuç çıkar:

Yanındaki sayfayı ve daha derindeki bir loading.jsx devralana kadar bunun altında yuvalanmış her şeyi kapsar
Yalnızca sayfa değişir: düzenin (layout) üst bilgileri ve gezintisi (navigation) yerinde kalır ve tıklanabilir durumda kalır

Neleri yazmadığınıza dikkat edin: yüklenme bayrağı (loading flag) yok, durum (state) yok, if (loading) yok. Dosya adı mekanizmanın kendisidir.

Görev

Kolay

app/slow/page.jsx yavaş bir yükleme bekliyor ve app/slow/loading.jsx zaten mevcut ancak boş.

Bunun <main> elemanının içine, id="loading" olan bir <p> ekleyin.
Metni tam olarak Loading the special... olmalıdır.

Sayfa ve lib/data.js kilitlidir. Testler /slow adresine gider ve veri gelmeden önce ekrana bakar.

Kendin dene

import './globals.css';

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

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