Suspense と React.lazy はコード分割でどのように機能しますか?

Question

Accepted Answer

**`React.lazy`** はコンポーネントの JavaScript バンドルを**オンデマンドで**(初めてレンダリングされるときにのみ)読み込みます。**`Suspense`** は、遅延読み込み(またはデータでサスペンドする)子要素がまだ読み込み中の間、フォールバック UI を表示します。 ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## なぜ重要か: 初期読み込みの軽量化コード分割をしないと、ブラウザは何かを表示する前に**アプリ全体**(重いチャートライブラリを含む)をダウンロードします。`lazy` を使えば、`Chart` のコードは独自のファイルに分割され、ユーザーが実際にそこに到達したときにのみ取得されます。これにより初期読み込み時間と Core Web Vitals が改善します。 ## Suspense がどう調整するか `Chart` がサスペンドする(バンドルが未準備)と、React はツリーのその部分を「一時停止」し、代わりに最も近い `Suspense` のフォールバックをレンダリングします。読み込みが完了すると本物のコンポーネントに差し替えます。1 つのバウンダリで複数の遅延読み込み子要素を包み、1 つのフォールバックを表示できます: ```jsx }>

``` ## コード分割を超えて Suspense は、保留中のフェッチで「サスペンド」するフレームワーク/ライブラリと組み合わせて**データ読み込み**も調整し、**ストリーミング SSR**(Next.js App Router)と連携して高速なシェルを先に送り、遅い部分をストリーミングします。コンテンツがポップインする際の大きく不快なレイアウトシフトを避けるため、バウンダリは慎重に配置してください。