商品一覧ページのデータ取得が遅いため、そのルートだけローディングUIを表示したいです。App Routerで最も簡単な方法はどれですか？

解説

正解: 同じセグメントにloading.tsxを作成するApp Routerでは、ルートセグメントにloading.tsxを置くと、その配下のページや子コンポーネントが読み込み中の間に自動でローディングUIが表示されます。Suspenseを明示的に書かなくても、ルート単位の待機状態を扱えるのが利点です。補足: 画面全体ではなく一部のウィジェットだけをローディングにしたい場合は、個別にSuspense境界を設ける方が適しています。A. 同じセグメントにloading.tsxを作成する: これが正解です。B. 同じセグメントにmiddleware.tsを作成する: Middlewareは通常ルート直下などでリクエスト制御に使い、ローディングUIは担当しません。C. 同じセグメントにroute.tsを作成する: route.tsはAPIエンドポイント用です。D. 同じセグメントにtemplate.jsonを作成する: App Routerのローディング規約ファイルではありません。