はじめに

こんにちわ！こんばんわ！ご観覧ありがとうございます。
定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが)
基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。

AppRouterとSuspenseについて

AppRouterのとSuspenseの組み合わせを使ったことなかったので、試しに実装してみます。
出オチすぎますが、以下記事が個人的にめちゃくちゃわかりやすかったです。

AppRouter

AppRouterについては以前の記事でつらつら書いているので、そちらを参考にしてもらえたら幸いです。

Suspense

SuspenseとはReact18から追加された機能で、子コンポーネントの読み込みを完了するまでフォールバックを表示できます。

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

簡単に表現すると、子のコンポーネントがサスペンド（一時停止）した際に、フォールバックするので、データの取得を担当するコンポーネントがデータ取得までの間、Loading画面を出せるというものです。
trycatch分を書くのと似ています。

import { Suspense } from 'react';
import Albums from './Albums.js';
import Biography from './Biography.js';
import Panel from './Panel.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<Loading />}>
        <Biography artistId={artist.id} />
        <Panel>
          <Albums artistId={artist.id} />
        </Panel>
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>🌀 Loading...</h2>;
}

これは公式のSuspenseの使用例ですが、子コンポーネントは複数可能で、どれか一つでもサスペンドした場合はフォールバックとなります。

AppRouterとの組み合わせ

とは言っても、使い方は上記で説明した通りです。

import { Suspense } from "react";
import { ChildrenServerComponent } from "@/components/ChildrenServerComponent";
import { Squares } from "@/components/Squares";
import Link from "next/link";
import { Loading } from "@/components/Loading";

export default async function Home() {

  return (
    <div className="p-8 relative">
      <h1 className="text-gradient-blue-green" data-content="TopPage">
        TopPage
      </h1>
      <Link href="/sample" className="text-sky-600">
        Sampleページへ
      </Link>
      <Suspense fallback={<Loading />}>
        <ChildrenServerComponent />
      </Suspense>
      <Squares />
    </div>
  );
}