TL;DR
子要素の読み込みが終わるまで、代わりにフォールバックの UI を表示する React のコンポーネント。
なぜ必要か
コンポーネントツリーの一部がまだ表示できる状態にないとき、その部分だけ読み込み中の UI を出したい。<Suspense> を使うと、読み込み中の UI をフォールバックとして宣言的に指定できる。
仕組み
<Suspense> で囲んだ子要素が読み込みを終えるまでは、fallback に渡した要素が表示される。読み込みが終わると、子要素に切り替わる。
例
Comments の読み込み中は、読み込み中を表す Spinner コンポーネントが表示される。
<Suspense fallback={<Spinner />}>
<Comments />
</Suspense>Next.js の App Router では、SSR でも React Server Component でも Suspense を使える。
関連
- Error Boundary: 子要素で例外が投げられたときにフォールバックの UI を表示する
- loading.tsx