画面が見えることと、ボタンが動くことは同じ？HTMLとhydration

Next.jsのClient Componentは、ブラウザーだけで最初から描かれるのでしょうか。use clientを付けた小さなカウンターをビルドすると、生成されたHTMLにすでに見出しと「カウント：0」がありました。画面に文字を出すことと、Reactの操作処理が動くことは、別の段階として考える必要がありそうです。

最初のHTMLが、画面の手掛かりになる

Next.jsでは、初回表示のためにサーバー側でHTMLを用意できます。Client Componentも初期HTMLに含まれる場合があり、use clientを「サーバーでは何も表示しない」という印として読むのは正確ではありません。 その後、ブラウザー側のJavaScriptが部品の処理をつなぎ、操作へ反応できる状態にします。Reactが既存のHTMLへ処理を結び付ける段階をhydrationと呼びます。

専用カウンターで、生成HTMLと実画面を比べる

Next.js 16.3.2の専用ページに、use client、useState、useEffectを使うカウンターを作りました。最初は「初期表示」と0を描き、Effectが動くと「クライアント処理が動いた」へ切り替えます。ボタンを押すと数を一つ増やします。 まずビルド済みの生成HTMLからscript以外の表示文字を取り出しました。次に専用ページを実ブラウザーで開き、状態表示を確認してボタンを一回押しました。

HTMLに文字があるだけでは、onClickの動作確認にならない

生成HTMLにボタンがあることは、クリックでカウントが増えることまで証明しません。今回の操作処理は、JavaScriptの状態更新です。ブラウザーで実際に押し、0から1へ変わることを別に確認しました。 ただし、HTMLのリンクやフォームなど、ブラウザーが備える既定の操作もあります。「JavaScriptが動くまでページの全要素が何もできない」という説明にも広げません。

今回の初期HTMLは、ビルド時に作られたもの

この専用ページは静的に事前生成されました。リクエストのたびにサーバーが新しくHTMLを作る処理時間を測ったわけではありません。サーバー側で用意されたHTMLと、その後のブラウザー側の処理を比べる作例です。 また、hydrationの直前を撮影したり、JavaScriptの取得を遅らせて待ち時間を測ったりした試験でもありません。生成物に何があるかと、実ブラウザーで何が動くかを、別の証拠で確かめました。

実アプリも、役割が部品単位で分かれる

Appli Parkの記事ページはサーバー側で記事データを受け取り、本文描画や画像表示などの部品を組み合わせます。操作を持つ部品が混ざっていても、ページ全体を「全部サーバー」か「全部ブラウザー」へ二分できるとは限りません。 表示の不具合を調べるなら、初期HTMLに内容があるか、ブラウザーの処理が動いたか、操作後の状態が変わるかを分けます。見えたことを、そのまま操作の成功とみなさないための確認です。

参照：Next.js公式「Server and Client Components」、React公式「hydrateRoot」。専用ページの生成HTMLと実クリック結果を確認し、実記事ページの部品構成を読解しました。

確認日：2026年9月22日。実装・検証結果・公式資料は確認時点のものです。