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

• 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>
    </>
  );
}

loading.jsの使い方

ローディング画面を表示させたいディレクトリにloading.js を追加するだけです。

├── app
│   ├── admin
│   │   ├── layout.tsx
│   │   ├── loading.tsx // 追加する
│   │   ├── page.tsx

loading.js には、待機画面で表示させたいUIをコーディングします。

// /admin/loading.tsx

export default function Loading() {

  return <h2>Loading...</h2>

}

あとはNext.js側で自動的にpage.js とその配下にあるコンポーネントを全てSuspenceでラップしてくれます。

さいごに

Next.jsのloading UIについて解説しました。

loading.js を配置するだけなので簡単です。

裏でSuspence が動いていることは頭の片隅に置いておきましょう。