参画したプロジェクトで、ほぼ全部のファイルの先頭に 'use client' が付いていました。どう判断しますか。
まず経緯を見ます。どこか1つで useState が必要になり、エラーが出るたび親へ足していった結果であることが多いためです。境界が上に行くほど、下は全部クライアントに送られます。
面接官が見ているのはServer Components の意味を理解しているか。ここが App Router の入口。
よくある答えと、面談でどう見られるか
- なぜそうなったかを見てから、状態やイベントが要る葉のコンポーネントまで境界を下げる
これが正解です。'use client' はファイル単位のフラグではなく境界なので、位置を下げること自体が改善になります。 - 一律で剥がしてビルドが通るまで直す
方向は合っていますが、順序が危ないです。剥がすと useState を使っている箇所が全部エラーになり、どこまで壊したか分からない状態になります。境界を下げるのは1ルートずつです。 - そういう書き方もあるので、既存の方針として尊重してそのままにする
既存方針を尊重する姿勢自体は正しいのですが、これは方針というより「エラーが出るたびに親へ足していった結果」であることが多いです。面談では「代償を説明できるか」を見られます。少なくとも「クライアントJSが増えている」とは言えるようにしておきたいところです。 - 全部クライアントで動くということなので、SSR を無効にして構成を単純にする
前提が違います。'use client' を付けてもサーバーでのプリレンダーは行われます。「クライアント専用」ではなく「クライアントでも動く」です。ここは誤解が多い箇所です。
面接官は何を見ているか
- 'use client' を付けるとクライアントJSが増える、という代償を言えた
- なぜそうなったか（原因）を推測してから直そうとした
- 一律に剥がすのではなく、境界の位置を問題にした
模範解答
まず「なぜそうなっているか」を見ます。多くの場合、どこか1つのコンポーネントでuseState や onClick が必要になり、エラーが出るたびに親へ 'use client' を足していった結果です。
問題は、'use client' がファイル単位のフラグではなく境界だという点です。公式の言い方では、'use client' を付けたモジュールと「そのモジュールが import しているもの・直接レンダリングしているもの」がまとめてクライアントバンドルに含まれます。つまり上の方に1枚付けると、その下が丸ごとクライアントに送られます。
直し方は「剥がす」ではなく「下げる」です。状態やイベントハンドラが本当に必要な葉のコンポーネントにだけ付けて、それ以外はサーバーのままにします。ただし、いきなり全部やると壊すので、まずバンドルサイズの大きいルートから1本ずつ試します。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。