Client Componentで「async/await is not yet supported in Client Components」というエラーが出ました。最も適切な修正はどれですか？

解説

正解: データ取得をServer Componentへ移すか、Client Component内ではuseEffectなどで取得するClient Componentのコンポーネント関数自体をasyncにしてawaitする書き方は、App Routerではサポートされていません。初期表示に必要なデータはServer Componentでawaitしてpropsとして渡し、ブラウザ操作後の取得はuseEffectやイベント内で行うのが基本です。補足: 何でもClient Componentに寄せると、ローディング管理やSEOが難しくなります。初期データか操作後データかで取得場所を分けます。A. コンポーネント関数をasyncのままにし、Suspenseで囲む: Suspenseで囲んでもClient Component関数自体のasync制限は解決しません。B. データ取得をServer Componentへ移すか、Client Component内ではuseEffectなどで取得する: これが正解です。C. next.config.jsでexperimental.asyncClientComponentを有効にする: そのような一般的な解決設定はありません。D. fetchの代わりにXMLHttpRequestを使って同じ場所でawaitする: 通信手段を変えてもasync Client Componentの問題は残ります。