ファイルの先頭に書く 'use client' は、何を宣言していますか。
サーバーとクライアントの境界です。モジュール依存グラフに境界を入れ、そこから下のサブツリーをクライアント扱いにします。import した先まで推移的に巻き込む点が要注意です。
面接官が見ているのは最頻出の誤解。「そのファイルだけ」と思っていると、バンドルが膨らむ理由が分からない。
よくある答えと、面談でどう見られるか
- サーバーとクライアントの境界。そのモジュールと、import しているものがクライアント扱いになる
境界より下は、自分が書いていなくてもクライアント扱いになります。 - そのファイルだけがクライアント側で動くという宣言
import しているものも巻き込まれます。ここを誤解するとバンドルが膨らみます。 - そのコンポーネントをサーバーで実行しないという宣言
実行されます。プリレンダーは行われます。 - クライアント側でも動けるようにする宣言で、依存も一緒にクライアントへ送られる
正確です。「クライアント専用」ではなく「クライアントでも動く」です。
模範解答
サーバーとクライアントの境界の宣言です。React の公式リファレンスは、モジュール依存グラフ上に境界を導入し、クライアントモジュールのサブツリーを作る、と説明しています。
重要なのは、境界より下が推移的に巻き込まれることです。'use client' を書いたファイルが import しているユーティリティは、そこに 'use client' と書いていなくてもクライアントバンドルに含まれます。重い日付ライブラリを1つ import しているだけで、それが乗ります。
だから「上の方に1枚付ける」と、その下が丸ごとクライアントへ送られます。状態やイベントが本当に必要な葉のコンポーネントにだけ付けるのが原則です。