ローディング状態

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 26/47。

`async` ページは、最も遅い読み込みと同じ速度にしかなりません。Next.js が待機している間、ユーザーは一体何を見ているのでしょうか？

ページの隣に loading.jsx を配置すれば、答えは自由自在です。

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

これは、default export を備えた通常のコンポーネントであり、props を受け取りません:

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

自身でレンダリングすることも、インポートすることもありません。このファイルをページの隣に配置すると、そのページが Suspense バウンダリでラップされます。Next.js はナビゲートした瞬間に loading.jsx を表示し、async/await の処理が完了すると実際のページに切り替えます。その間、周囲のレイアウトがチラつくことはありません。

ファイルが置かれている場所から、次の2点が導き出されます。

そのファイルと同じ階層のページおよびその下にネストされたすべてのページに適用され、より深い階層の loading.jsx が引き継ぐまで効果を発揮します
ページのみが切り替わります：レイアウトからのヘッダーやナビゲーションはそのまま残り、クリック可能な状態を維持します

あなたが書いたコードに存在しないものに注目してください。ローディングフラグも、状態（state）も、if (loading)もありません。ファイル名こそがその仕組みなのです。

チャレンジ

簡単

app/slow/page.jsx は低速な読み込みを待ち、app/slow/loading.jsx は既に存在しますが空の状態です。

その <main> の中に、id="loading" を指定した <p> を追加します。
そのテキストは正確に Loading the special... である必要があります。

ページと lib/data.js はロックされています。テストは /slow に移動し、データが到着する前に画面を確認します。

自分で試してみよう

import './globals.css';

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

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