propsを1つ増やしただけなのにレスポンスサイズが5倍に増えてしまった

ある日、Vercelのダッシュボードを見ると以前はだいたい100KB前後だったページのレスポンスサイズが500KB前後に増えてしまっていました。 原因はサーバコンポーネントからクライアントコンポーネントに渡すpropsが巨大だったことでした。 SCからCCに渡したpropsはRSCペイロードという形で初回レスポンスのHTMLに含まれるためです。 分かってしまえば単純なことなのですが、当時Next.jsのバージョンアップなどの改修も同時に行なっていたために原因調査に手こずりました。 そんなわけで、レスポンスサイズが5倍になったときの調査に役に立つかもしれない（？）RSCペイロードの覗き方を簡潔にお伝えします。 RSCペイロードを覗く Next.jsでRSCペイロードがどう扱われているのか、実際に覗いてみます。 以下の3つのファイルを用意して確かめます。 import ClientCompon

[daira4000]

当たり前っちゃ当たり前なんだがやってしまいがちなやつ

[juejue]

これ結局レスポンスサイズを5倍に増やしたままにしたのか、対応してサイズを小さくしたのかどっちなんだ？？

[fivestech]

Reactというかコンポーネント指向であれば考えなければならない部分だねぇ

[kenzy_n]

ほんの小さな変更でも大きな変化を及ぼすことがある。

[tofu-kun]

やりがちなので自分も気をつけたい。