Suspense

Suspense：

<Suspense> は非同期処理だけを後で表示して、ページ全体の初期描画を速く見せるための仕組み
*クライアントコンポーネント：useEffect 内でfetchを行っているコンポーネントは、レンダリング後に実行されるのでSuspenseは意味がない

const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <Header />

      <Suspense
        fallback={<div className="w-full h-full bg-red-500">Loading...</div>}
      >
        <main>
          <div className="relative">{children}</div>
        </main>
      </Suspense>

      <Footer />
    </>
  );
};

export default Layout;

やることとしては非同期処理を行っているサーバーコンポーネントをSuspenseで囲む
上記の挙動としてはloading.tsx のスピナー表示の時間が一瞬になり、非同期処理が無いSSRコンポーネントである<Header /> と<Footer />部分が先に表示され、その後{children} 部分が表示される

fetch単位でSuspense分割すること

親の Suspense は子コンポーネント全てがレンダリング可能になるまで Fallback を表示するので、非同期コンポーネント毎に Supense を分けたほうがUXが良い

// X
<Suspense fallback={<Loading />}>
  <Comp1 />
  <Comp2 />
</Suspense>

上記は Comp2 の非同期処理が完了していても、Comp1の完了を待たないといけない。

// O
<Suspense fallback={<Fallback1 />}>
  <Comp1 />
</Suspense>
<Suspense fallback={<Fallback2 />}>
  <Comp2 />
</Suspense>

loading.tsxとの共存

loading.tsxはページ単位のFallback UIなので、ページですぐに表示できる部分があっても非同期処理を待っている間は全体の表示が止まる。Suspenseは非同期処理箇所に部分的なFallbackを表示することができるので、loading.tsxの欠点をカバーできる（loading.tsxが短くなる）。

非同期処理では無いSSRコンポーネントの最初の完了までは「ルート全体のローディング」は依然として必要なので、loading.tsx は必要

React：Suspense