Next.js Features - 上級

Suspense とローディング

非同期コンポーネントの読み込み状態を宣言的に管理

Suspense とは

非同期処理の完了を待つ間、フォールバックUIを表示

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

高速なコンポーネント

500ms で読み込み完了

高速コンポーネント

このコンポーネントは 500ms で読み込まれました。

読み込み完了

遅いコンポーネント

2秒で読み込み完了

遅いコンポーネント

このコンポーネントは 2秒で読み込まれました。

読み込み完了（遅延あり）

ユーザープロフィール

Skeleton UI を活用した実践的な例

田中

tanaka@example.com

フロントエンドエンジニア

ストリーミング SSR の仕組み

複数の Suspense 境界による段階的なレンダリング

1. 即座にレンダリング

静的な部分とSuspenseのfallbackを最初に送信

2. 高速データ到着

準備できた部分から順次ストリーミング

3. 遅いデータ到着

最後に遅いコンポーネントが差し替わる

このページをリロードすると、各コンポーネントが順番に表示される様子を確認できます。

Next Steps

次のステップ

Compound Components パターンを学んでみましょう。