Next.js の loading と Suspense。最小構成サンプル

待たせ方は2つある

loading.tsx はファイルを置くだけです。自分で Suspense を書く必要はありません。Next.js がそのページを囲んでくれます。

待たせる前に、待つ必要があるか

このサンプルには1行だけ、変わった行があります。

export const dynamic = "force-dynamic";

これが無いと、待ち時間はビルドの中で終わります。

実機で確かめました。この行を書く前は、0.6 秒の待ちがビルド時に消化され、出来上がった HTML に値が焼き込まれていました。開いた人は待ちません。待たせる話をする前に、そもそも待つ必要がなかったわけです。

遅い部分だけを囲む

<p>この行はすぐに出ます。</p>
 
<Suspense fallback={<p>この部分だけ読み込んでいます</p>}>
  <Slow />
</Suspense>

実機で確かめました。応答は 0.69 秒かかりますが、届く順番が違います。

1つ目に届いたもの   この行はすぐに出ます
2つ目に届いたもの   この部分だけ読み込んでいます     ← 待っている間の表示
3つ目に届いたもの   0.6秒かけて取ってきた値         ← 0.6秒後に追いついた

囲まなければ、この 0.6 秒のあいだページに何も出ません。囲めば、速い部分だけ先に出ます。

2つの使い分け

// app/loading.tsx を置くだけ
export default function Loading() {
  return <p>読み込んでいます</p>
}

// 遅いところだけ囲む
<p>すぐ出る部分</p>
 
<Suspense fallback={<p>待機中</p>}>
  <Slow />
</Suspense>

両方を書いて構いません。このサンプルは両方あります。移った瞬間は loading.tsx が出て、ページが描かれ始めると遅い部分だけが Suspense で待たされます。

待ち時間は短く

ここから足していくとき

• 骨組みを見せる。fallback に四角を並べて、出来上がりの形を先に見せます
• 失敗したときの表示。取得が失敗する経路には error.tsx を置きます。そちらは Client Component です
• 囲む範囲を分ける。遅いものが複数あるなら、別々に囲むと早いものから出ます

囲む範囲を小さくするほど、読める時間が早くなります。ページ全体を囲むのは、いちばん粗い使い方です。