ひとことで言うと
HydrationとはSSR（サーバーサイドレンダリング）で生成した静的HTMLに対して、クライアント側のJavaScriptがイベントリスナーや状態管理を後から付与し、インタラクティブなページに「蘇らせる」プロセスのことだ。見た目は即座に表示されるが、Hydration完了前はクリックしても何も起きない。
Next.jsやNuxt、SvelteKitなどのフレームワークはHydrationを自動で行う。AI生成ツールがこれらを使って出力したコードをHTMLとして書き出した場合、Hydrationに必要なJSバンドルが欠けると「見えるが動かない」ページになる。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
Next.jsで`next export`したフォルダを共有する際、`_next/static/`以下のJSが含まれていないとHydrationが走らない。表示は正常でもカルーセルやアコーディオンが機能しないため、受け取った相手は「壊れている」と判断してしまう。フォルダ全体をzipする前に`_next/`ディレクトリが含まれているか確認すること。
ギガサイト便のようなHTTPS配信ではフォルダ構造を保ったままアップロードできるため、Hydrationに必要なJSパスが維持される。一方でCloudinaryなど画像専用CDNにHTMLをアップロードしてURLを共有する方法は、JSバンドルを別途配置できずHydrationが失敗する典型的なミスだ。
よくある誤解
「ページが表示されたからHydrationは成功している」と思いがちだが、これは誤りだ。SSRで生成したHTMLはJS抜きで表示できるよう設計されており、Hydrationが走っていなくてもテキストや画像は見える。ブラウザのコンソールに`Hydration mismatch`エラーがないかを確認する習慣が重要だ。
「Hydrationは常に高速に完了する」という思い込みも危険だ。共有先のネットワーク環境が遅い場合、JSバンドルのダウンロードに数秒かかりHydration待ちが生じる。特にモバイル回線でのレビューを求める場合は、バンドルサイズを事前に確認しておくべきだ。
安全に使うための注意点
Hydrationの過程でクライアント側JSがAPIへのリクエストを自動実行する場合がある。開発環境のAPIエンドポイントやテスト用のトークンがコードに残っていると、共有相手のブラウザからそのAPIが呼ばれてしまう。共有前にネットワークタブで自動発火するリクエストをすべて確認する。
HydrationエラーはSSRとCSRの描画結果の不一致で発生する。AI生成コードには`Math.random()`や`Date.now()`をレンダリング中に使うパターンが含まれることがあり、これがHydration mismatchを引き起こす。共有前にブラウザコンソールのエラーをゼロにしてから渡すと、受け取った側の混乱を防げる。
よくある質問
Hydrationが完了するまでの間、ユーザーに何か操作させないようにする方法はありますか？
Next.jsでは`loading.tsx`やSkeletonコンポーネントを使い、Hydration前にローディング表示を出す方法が一般的です。共有用プレビューなら操作がないため問題になりにくいですが、本番公開前には対処を検討してください。
AI生成のReactコードをHTML単体ファイルとして書き出すことはできますか？
Reactは通常バンドルが必要ですが、CDN版React+BabelをscriptタグでHTMLに埋め込めばHTMLファイル一枚で動きます。ただしパフォーマンスは劣るため、レビュー用途の一時共有に限って使う方法です。
Hydration mismatchエラーが出ても見た目は正常なのに、修正しないといけませんか？
社内レビュー用の一時共有なら即時対応は不要ですが、本番公開前には必ず修正すべきです。mismatchはReactが強制的にDOMを再構築し、予期しないちらつきやSEO問題を引き起こす場合があります。