IT-Q

'use client' を付けたコンポーネントは、サーバーでは実行されませんか。

実行されます。公式は「Client Component は既定でサーバー上でプリレンダーされる」と書いています。クライアント専用ではなく、クライアントでも動く、が正しい理解です。

面接官が見ているのはここを外すと、コンポーネント本体に window を書いて落とす。

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

  • 実行される。サーバーでプリレンダーされたうえで、クライアントでも動く
    公式も「Client Component は既定でサーバー上でプリレンダーされる」と書いています。
  • 実行されない。クライアント専用になる
    最頻出の誤解です。この理解だと本体に window を書いてサーバー側で落とします。
  • 実行されるが、useEffect の中身はサーバーでは走らない
    正確です。だからブラウザ専用のAPIは useEffect の中に置きます。
  • 開発時は実行されるが、本番ビルドではクライアントのみになる
    環境で変わりません。本番でもプリレンダーされます。

模範解答

実行されます。公式は「Client Component は既定でサーバー上でプリレンダーされる。クライアント側の JavaScript を実行する能力が追加されたもの、と考えるとよい」と書いています。「クライアント専用」ではなく「クライアントでも動く」です。

実務で効くのは、この「サーバーでも1回実行される」という事実です。コンポーネント本体に window や localStorage を直接書くと、サーバー側の実行で落ちます。useEffect の中に入れるか、ブラウザで動いているかを確認してから触る必要があります。