たった一行のディレクティブと223キロバイト

まず数字から

PageSpeed のモバイル性能は71でした。これは診断ではなくスコアなので、本番ビルドを走らせてルート表を読みました。トップページだけが First Load JS 315 kB。サイトの他は90前後でした。

中身

ページのファイルは "use client" で始まっていました。この一行でReactツリーはクライアントコンポーネントになり、importしたものすべてが一緒に送られます。六百行のレイアウト、ページ上のすべての文字、すべてのイラスト。

ブラウザが本当に必要な理由を調べました。useStateなし。useEffectなし。イベントハンドラも一つもなし。国際化のフックを二つ呼ぶためだけにクライアントコンポーネントでした。そのフックにはサーバー版が別名で存在します。

置き換え

14個のコンポーネントがクライアントのフックからサーバーのフックに移り、asyncになりました。ディレクティブは消えました。タイピングする見出しとFAQの行は、もともと独立したクライアントコンポーネントで、そのままです。

315 kB -> 91.8 kB

覚えておく価値があること

"use client" を不注意に書いた人はいません。ページが本当にフックを必要とした初期に追加され、その理由がリファクタで消えた後も残ります。ときどきルート表を開いて、見た目より重いページはどれかと問う価値があります。