Next.js の Client Component で async/await を使う

クライアントコンポーネントでも async/await は使える クライアントコンポーネントをサーバ上で動かす際、async/await が使えないという誤解があります その誤解を解くために最小限のサンプルを用意しました このサンプルではサーバ上で非同期データを取得し HTML で出力、ブラウザ上で Hydration して動作します 重要な点は、throw property.promiseの部分です。ここで Promise が解決された際に、コンポーネントが再レンダリングされます。この機能は React のrenderToReadableStream実行時の標準動作です。<Suspense>で囲むと、非同期待ちではなくストリーミングになってしまうので注意が必要です クライアントコンポーネントは Hydration 時、サーバ側で持っていたデータを失います。サーバコンポーネントと連携する際