TL;DR
レンダリングした React Server Component のツリーを、コンパクトにシリアライズしたデータ形式。クライアントの React が、ブラウザの DOM を更新するのに使う。
仕組み
Next.js の公式ドキュメントによると、RSC Payload には次のものが含まれる。
- Server Component をレンダリングした結果
- Client Component を描画する位置のプレースホルダと、その JavaScript ファイルへの参照
- Server Component から Client Component に渡す props
サーバでは、Server Component を RSC Payload にレンダリングし、Client Component と RSC Payload から HTML を事前に生成する。最初の読み込みでは、クライアントは HTML で操作できないプレビューをすぐに表示し、RSC Payload で Client Component と Server Component のツリーを突き合わせ、JavaScript で Client Component をハイドレーションする。
その後のページ遷移では、RSC Payload が事前に取得されてキャッシュされる。Client Component はサーバでレンダリングした HTML を使わず、クライアントだけで描画される。
例
Next.js では、Full Route Cache がサーバで、Client-side Router Cache がクライアントで、RSC Payload をキャッシュする（Next.js の 4 種類のキャッシュ）。