App Routerで商品一覧ページを作るとき、データベースから商品を取得してHTMLに表示するだけで、クリック操作やuseStateは使いません。最も適切な実装はどれですか？

解説

正解: page.tsxをServer Componentのままにし、そこでデータベース取得を行うApp Routerでは、page.tsxやlayout.tsxはデフォルトでServer Componentとして扱われます。表示だけに必要なデータ取得であれば、サーバー上で直接データベースや内部APIにアクセスでき、クライアントへ不要なJavaScriptを送らずに済みます。補足: Client Componentはユーザー操作やブラウザAPIが必要な部分に絞ると、初期表示の軽さと保守性を両立しやすくなります。A. page.tsxをServer Componentのままにし、そこでデータベース取得を行う: これが正解です。B. page.tsx全体をClient Componentにして、useEffectでデータベース取得を行う: DB接続情報をブラウザ側へ持ち込めず、初期表示も遅くなりやすいです。C. 必ずRoute Handlerを作成し、page.tsxからfetchで呼び出す: 外部公開APIが必要な場合は有効ですが、同一アプリ内表示だけなら必須ではありません。D. middleware.tsでデータベース取得を行い、ページへ結果を渡す: Middlewareはリクエスト制御向けで、ページ用の重いデータ取得には向きません。