IT-Q

layout.tsx は、ページを移動したときどうなりますか。

再レンダリングされず、状態が保たれます。公式も「遷移時にレイアウトは状態を保持し、再レンダリングしない」と明記しています。サイドバーの開閉が戻らないのはこのためです。

面接官が見ているのはlayout の状態保持を知らないと、ヘッダーの挙動やデータ取得の置き場所を誤る。

よくある答えと、面談でどう見られるか

  • 再レンダリングされず、状態が保たれる
    公式の表現は「layouts preserve state, remain interactive, and do not rerender」です。
  • ページごとに毎回作り直される
    それは template.tsx の挙動です。layout は保たれます。
  • 保たれるが、状態はリセットされる
    状態も保たれます。サイドバーの開閉が遷移で戻らないのはこのためです。
  • 状態が保たれる。毎回リセットしたい場合は template.tsx を使う
    使い分けまで押さえられています。

模範解答

再レンダリングされず、状態が保たれたままになります。公式は「On navigation, layouts preserve state, remain interactive, and do not rerender」と書いています。サイドバーの開閉状態がページ遷移で戻らないのはこのためです。

毎回リセットしたい場合は template.tsx を使います。こちらは遷移のたびに新しいキーが与えられるので、配下の Client Component の状態がリセットされ、useEffect も再実行されます。

なお、ルートレイアウト(app/layout.tsx)は必須で、html と body のタグを含む必要があります。