この記事を読んだ後に理解できること

React 18のSuspenceについての理解
Next.jsでのloading UIについての理解

loading.jsとは？

loading.jsはReact 18のSuspenceがベースとなっており、loading UIを表現できるファイルです。
Next.jsのApp Routerで使うことができます。

loading.jsは、データを取得するAPIリクエストの応答を待っている間に一時的に画面上に表示したり、ページ遷移後にページ内容が完全にロードされるまでの間に表示するUIファイルになります。

これらをfallback UIと呼びます。

この文脈でのfallbackとは「予備」「代替」といった意味で解釈されます。

loading.jsを理解する上でReact18のSuspenceの挙動を理解する必要がありますので、解説します。

loading.jsの前提知識であるSuspenceを理解する

SuspenceとはReactが提供するローディング画面を表示するためのコンポーネントです。

Suspenceを使うことでデータフェッチ等の非同期処理時に表示する待機画面（例：スピナー等のローディング画面）の実装を非常に簡単に実装することができます。

Suspenceの基本的な使い方

Suspenceは以下のpropsを受け取ります。

fallback

fallbackは、あるコンポーネントやデータがまだ読み込まれていないときに一時的に表示される代替のUIです。例えば、データを取得するAPIリクエストの応答を待っている間に、ユーザーに何かを表示したいときに使います。
このfallbackには、Reactでレンダリング可能な任意のノード（要素やコンポーネントなど）を指定することができます。
子コンポーネントがデータの読み込みを一時的に「待機」すると、自動的にfallbackが表示されます。データが読み込まれて準備ができたら、本来の子コンポーネントが再び表示されます。
要するに、fallbackはコンポーネントやデータがまだ準備できていない間、ユーザーに何かしらのフィードバック（例: ローディングアイコン）を提供するための機能です。データが利用可能になると、自動的に本来のコンテンツに切り替わります。

children

childrenは、表示したい実際のUIやコンテンツを指します。これはReactのコンポーネント内で子要素として渡されるものです。
しかし、このchildrenがレンダリング中にデータ取得などの理由で待機状態になると、その場合、Suspenseは自動的にfallbackを表示するように切り替わります。データが利用可能になれば、再びchildren、すなわち元のUIが表示されます。
つまり、childrenは普段表示したい主要なコンテンツを示し、何らかの理由で待機が必要な場合に、Suspenseがfallbackに自動的に切り替わる機能を提供しています。

以下は実際の使用イメージです。
Suspenceはimportする必要があります。

import { Suspense } from "react"

export default function Page({ articleId }) {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <ArticleDetail articleId={article.id} />
      </Suspense>
    </>
  );
}

Next.js loading UIの使い方〜React18のSuspenceを理解する〜

目次