loading.tsx は、どういう仕組みで表示されていますか。
Next.js が page を Suspense で包み、fallback に loading.tsx の中身を入れる形に展開されます。特別な仕組みではなく、自分で Suspense を書くのと同じことをしています。
面接官が見ているのはファイル規約が React の機能に対応していることの理解。
これは「ページ遷移した直後に画面が真っ白になる時間があります。どう改善しますか。」への追撃質問です。
よくある答えと、面談でどう見られるか
- React の Suspense 境界として働いている。自分で Suspense を書くのと同じ
ファイル規約は React の標準機能への対応付けです。error.tsx も同様にエラーバウンダリです。 - Next.js 独自のローディング機構
独自の仕組みに見えますが、中身は React の Suspense です。そう理解しておくと、自分で Suspense を書くときに迷いません。 - ページ遷移を検知して表示している
遷移の検知ではなく、データ待ちの間の fallback です。 - データ取得が完了するまで表示される fallback
結果としてはその通りです。仕組みとして Suspense だと言えるとなお良いです。
面接官は何を見ているか
- Suspense 境界として働くと答えた
- 自分で Suspense を書くのと同じだと理解している
- フォルダ単位で適用されると言えた
模範解答
React の Suspense 境界として働きます。Next.js が page を Suspense で包み、fallback に loading.tsx の中身を入れる、という形に展開されます。
つまり特別な仕組みではなく、自分で Suspense を書くのと同じことをファイル規約でやっているだけです。
同じ考え方で、error.tsx は React のエラーバウンダリ、not-found.tsx は「見つからない」用のエラーバウンダリに対応しています。ファイル名を置くだけで動くので魔法に見えますが、中身は React の標準機能です。