ページ遷移した直後に画面が真っ白になる時間があります。どう改善しますか。
まず何を待っているかを特定します。データ取得なのかJSのダウンロードなのかで打ち手が違うためです。データ取得が理由なら、そのルートに loading.tsx を置きます。
面接官が見ているのはloading.tsx / Suspense を知っているか。
よくある答えと、面談でどう見られるか
- 何を待っているかを特定してから、loading.tsx か Suspense でスケルトンを出す
原因の特定を先に置いているのが良いです。データ待ちとJS待ちでは打ち手が違います。 - loading.tsx を置く
正解です。ルート単位の Suspense 境界として働きます。面談ではこの後「仕組みは？」「範囲を絞るには？」と続きます。 - 遷移前にデータを先読みしておく
リンクの先読み自体は有効な手ですが、真っ白な時間が出ている時点で、まず何を待っているかの特定が先です。 - ページ全体を Client Component にして、クライアント側で取得する
真っ白な時間は消えず、むしろ延びます。JS を落として実行するまで何も出せなくなるためです。
面接官は何を見ているか
- loading.tsx か Suspense を挙げた
- 何が待たれているかを先に特定しようとした
- スケルトンを出す発想があった
模範解答
まず何を待っているかを特定します。データ取得が遅いのか、JSのダウンロードが重いのかで打ち手が違うためです。
データ取得が理由なら、そのルートに loading.tsx を置きます。これは React の Suspense 境界として働き、データが揃うまでの間そのファイルの中身が表示されます。スケルトンを置いておけば、真っ白ではなくレイアウトの形が見えます。
もっと細かく制御したい場合は、遅いコンポーネントを個別に Suspense で包みます。loading.tsx はルート単位、Suspense はコンポーネント単位、という使い分けです。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。
一部しか触れられなかった場合
loading.tsx は、どういう仕組みで表示されていますか。触れられなかった場合
loading.tsx は、どういう仕組みで表示されていますか。