Server Componentで取得した記事一覧に、クライアント側だけで動く検索フィルターを追加したいです。設計として最も適切なのはどれですか？

解説

正解: 記事取得はServer Componentで行い、検索UIだけをClient Componentに切り出すApp Routerでは、データ取得やHTML生成はServer Componentに任せ、useStateやonChangeが必要な検索入力だけをClient Componentに分離する設計が自然です。Client Componentには、サーバー側で取得した記事データをシリアライズ可能なpropsとして渡せます。補足: Client Componentの範囲を小さく保つと、送信されるJavaScript量を抑えられ、画面全体の再利用性も高くなります。A. 記事取得も検索入力もすべてServer Componentにまとめる: 入力イベントや状態管理はServer Componentでは扱えません。B. 記事取得はServer Componentで行い、検索UIだけをClient Componentに切り出す: これが正解です。C. 検索入力のためにlayout.tsx全体をClient Componentに変更する: 必要以上に大きな範囲をクライアント化してしまいます。D. 検索状態をmiddleware.tsに保存してページを再描画する: MiddlewareはUI状態の保持場所ではありません。