一覧データの取得は、どこに書くのが基本ですか。
Server Component の中で直接 await するのが基本です。page.tsx を async にして呼びます。ブラウザとAPIの往復が1回減り、取得用のコードがクライアントに送られません。
面接官が見ているのはApp Router の基本形。useEffect 一択の癖が抜けているか。
よくある答えと、面談でどう見られるか
- Server Component を async にして、その中で直接 await する
往復が1回減り、APIキーもクライアントに出ません。 - Client Component の useEffect の中で fetch する
動きますが、表示までの往復が増え、loading と error の状態を自前で持つことになります。 - Route Handler を作って、クライアントから呼ぶ
外部に口が要るなら妥当ですが、自分の画面に出すだけなら遠回りです。 - proxy.ts（旧 middleware）で取得してリクエストに載せる
全リクエストが通る場所なので、全ページが遅くなります。
模範解答
Server Component の中で直接 await します。page.tsx を async にして、その中で fetch なり ORM なりを呼ぶ形です。
useEffect でクライアントから取りに行く形と比べた利点は3つあります。表示までにブラウザ→APIの往復が1回減ること、APIキーやDB接続情報がクライアントに出ないこと、loading / error のフラグを自前で持たなくて済むことです。
なお Server Component では useEffect も useState も使えません。再レンダリングもライフサイクルも無いので、フックの前提が成り立たないためです。そもそも直接 await できるので、必要もありません。