loading.js

loading ファイルを使用すると、Suspense を基盤とした即時のローディング状態を作成できます。

デフォルトでは、このファイルはサーバーコンポーネント (Server Component) ですが、"use client" ディレクティブを使用してクライアントコンポーネントとしても利用可能です。

export default function Loading() {
  // またはカスタムのローディングスケルトンコンポーネント
  return <p>Loading...</p>
}

ローディング UI コンポーネントはパラメータを受け取りません。

知っておくと便利:

  • ローディング UI を設計する際には、React Developer Tools を使用して Suspense バウンダリを手動で切り替えると便利な場合があります。

バージョン履歴

バージョン変更内容
v13.0.0loading が導入されました。

On this page