loading.js

特別なファイル loading.js は、React Suspense を使用して意味のあるローディングUIを作成するのに役立ちます。この規約により、ルートセグメントのコンテンツがストリーミングされている間、サーバーからインスタントローディング状態を表示できます。新しいコンテンツは完了すると自動的に入れ替わります。

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

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

loading.js ファイル内には、軽量なローディングUIを追加できます。React Developer Tools を使用してSuspense境界を手動で切り替えると便利な場合があります。

デフォルトでは、このファイルはサーバーコンポーネントですが、"use client" ディレクティブを通じてクライアントコンポーネントとしても使用できます。

リファレンス

パラメータ

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

動作

フォールバックUIはプリフェッチされるため、プリフェッチが完了していない場合を除き、ナビゲーションは即座に行われます。
ナビゲーションは中断可能で、ルートのコンテンツが完全に読み込まれる前に別のルートにナビゲートできます。
新しいルートセグメントの読み込み中も共有レイアウトはインタラクティブなままです。

インスタントローディング状態

インスタントローディング状態とは、ナビゲーション時にすぐに表示されるフォールバックUIです。スケルトンやスピナーなどのローディングインジケーター、またはカバー写真やタイトルなど将来の画面の小さくても意味のある部分を事前にレンダリングできます。これにより、アプリが応答していることをユーザーが理解し、より良いユーザー体験を提供できます。

フォルダ内に loading.js ファイルを追加することでローディング状態を作成します。

export default function Loading() {
  // スケルトンを含む任意のUIをLoading内に追加できます
  return <LoadingSkeleton />
}

export default function Loading() {
  // スケルトンを含む任意のUIをLoading内に追加できます
  return <LoadingSkeleton />
}

同じフォルダ内では、loading.js は layout.js 内にネストされます。page.js ファイルとその下の子を自動的に <Suspense> 境界でラップします。

SEO

Next.jsは、UIをクライアントにストリーミングする前に generateMetadata 内のデータ取得が完了するのを待ちます。これにより、ストリーミングレスポンスの最初の部分に <head> タグが含まれることが保証されます。
ストリーミングはサーバー側でレンダリングされるため、SEOに影響しません。GoogleのRich Results Testツールを使用して、ページがGoogleのウェブクローラーにどのように表示されるかを確認し、シリアライズされたHTMLを表示できます（出典）。

ステータスコード

ストリーミング時には、リクエストが成功したことを示す 200 ステータスコードが返されます。

サーバーは、ストリーミングコンテンツ自体内でクライアントにエラーや問題を伝えることができます（例：redirect や notFound を使用する場合）。レスポンスヘッダーはすでにクライアントに送信されているため、レスポンスのステータスコードを更新することはできません。これはSEOに影響しません。

ブラウザ制限

一部のブラウザはストリーミングレスポンスをバッファリングします。レスポンスが1024バイトを超えるまでストリーミングレスポンスが表示されない場合があります。これは通常、「hello world」アプリケーションにのみ影響し、実際のアプリケーションには影響しません。

プラットフォームサポート

デプロイオプション	サポート状況
Node.jsサーバー	はい
Dockerコンテナ	はい
静的エクスポート	いいえ
アダプター	プラットフォーム依存

Next.jsをセルフホスティングする際のストリーミング設定方法を学びます。

例

Suspenseを使用したストリーミング

loading.js に加えて、独自のUIコンポーネントのために手動でSuspense境界を作成することもできます。App RouterはSuspenseを使用したストリーミングをサポートしています。

<Suspense> は、非同期アクション（例：データ取得）を実行するコンポーネントをラップし、その間フォールバックUI（例：スケルトン、スピナー）を表示し、アクションが完了したらコンポーネントを入れ替えることで動作します。

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>フィード読み込み中...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>天気情報読み込み中...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>フィード読み込み中...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>天気情報読み込み中...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

Suspenseを使用することで、以下の利点が得られます：

ストリーミングサーバーレンダリング - サーバーからクライアントへHTMLを段階的にレンダリング
選択的ハイドレーション - Reactはユーザー操作に基づいて、最初にインタラクティブにするコンポーネントを優先します

Suspenseのその他の例やユースケースについては、Reactドキュメントを参照してください。

バージョン履歴

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

On this page