loading.tsx を置くと、何が起きますか。
React の Suspense 境界として働きます。Next.js が page を Suspense で包み、fallback に loading.tsx を入れる形に展開されます。自分で書く Suspense と同じものです。
面接官が見ているのはファイル規約が React の標準機能に対応していることの理解。
よくある答えと、面談でどう見られるか
- React の Suspense 境界として働き、データが揃うまで中身が表示される
自分で Suspense を書くのと同じことを、ファイル規約でやっています。 - ページ遷移を検知して、その間だけ表示される
遷移の検知ではなく、データ待ちの間の fallback です。 - Next.js 独自のローディング機構が働く
独自に見えますが中身は React の Suspense です。そう理解すると自分で書くときに迷いません。 - 画像やスクリプトの読み込み中に表示される
アセットの読み込みではなく、データ取得の待ち時間に対するものです。
模範解答
React の Suspense 境界として働きます。Next.js が page を Suspense で包み、fallback に loading.tsx の中身を入れる、という形に展開されます。特別な仕組みではなく、自分で Suspense を書くのと同じことをファイル規約でやっています。
適用範囲はそのフォルダ配下です。特定のページだけに効かせたい場合は、括弧付きのフォルダ(ルートグループ)を作ってその中へ移します。括弧付きのフォルダ名は URL に現れないので、パス構造を変えずに範囲だけ区切れます。
もっと細かく制御したい場合は、遅いコンポーネントを個別に Suspense で包みます。loading.tsx はルート単位、Suspense はコンポーネント単位、という使い分けです。