App Routerで一部のデータ取得が遅いダッシュボードを作っています。ページ全体の表示を待たせず、遅い部分だけローディング表示にしたい場合、最も適切なのはどれですか？

解説

正解: 遅いServer ComponentをSuspense境界で分け、fallbackを表示するApp RouterはReact Server Componentsとストリーミングに対応しており、Suspense境界で分けた部分を後から段階的に送れます。これにより、ヘッダーや概要など先に表示できる部分をブロックせず、遅い集計ウィジェットだけローディング状態にできます。補足: loading.tsxはルート単位のローディングに便利ですが、画面内の一部分だけを制御したい場合はSuspenseを使うと柔軟です。A. すべてのfetchをuseEffectへ移して、ブラウザで順番に取得する: 初期HTMLの利点を失い、体感速度が下がることがあります。B. 遅い処理をmiddleware.tsへ移して、先に実行しておく: Middlewareはページ描画用の重い集計処理には向きません。C. page.tsx全体をdynamic importにしてSSRを無効化する: ページ全体の初期表示が遅くなりやすいです。D. 遅いServer ComponentをSuspense境界で分け、fallbackを表示する: これが正解です。