useHydrationとは？〜何が嬉しいのか、どんな課題を解決するのか

Nuxtでサーバーサイドレンダリング（SSR）を行う際、サーバーで生成した状態をクライアント側に正確に引き継ぐことは非常に重要です。これを「ハイドレーション」と呼びますが、状態の同期がうまくいかないと、クライアント側での再計算やAPIコールが発生し、パフォーマンス低下やUXの悪化を招きます。

useHydrationは、このハイドレーションの過程を明示的に制御できるNuxtの組み込みコンポーザブルです。サーバーで生成したデータを一意のキーで保存し、クライアントでそのデータを受け取って復元する仕組みを簡潔に実装できます。これにより、冗長な処理を防ぎ、状態の一貫性を保ちながら高速な初期表示を実現できます。

まず結論：useHydrationのポイント

• SSR時に生成した状態をクライアントに安全に引き継げる
• サーバー側での状態取得（get）とクライアント側での状態復元（set）を明確に分離
• ユニークなキーで状態を管理し、Nuxtのpayloadに自動的に保存・取得される
• プラグインやモジュール内での高度な状態管理に最適
• useStateよりも細かい制御が必要なケースで使うのが望ましい

いつ使うべきか？使わない方がよいケースは？

使うべきケース

• カスタムプラグインやモジュールで、SSR中に生成した複雑な状態をクライアントに引き継ぎたいとき
• APIコールや重い計算結果をサーバーで一度だけ行い、クライアントで再利用したい場合
• Nuxtの標準的な状態管理（useState）では対応しきれない特殊な同期ロジックが必要なとき

使わない方がよいケース

• 単純なグローバル状態管理にはuseStateのほうが簡単で推奨される
• クライアント側のみで完結する状態や、SSRでの同期が不要な場合
• 状態の同期よりもリアクティブなUI更新が主目的の場合

実務でよくあるユースケースとサンプルコード

1. サーバーで計算した集計データをクライアントに渡す

サーバーで重い集計処理を行い、その結果をクライアントで再利用したい場合に便利です。

export default defineNuxtPlugin((nuxtApp) => {
  const aggregateStore = new AggregateStore()

  useHydration(
    'aggregateData',
    () => {
      // SSR時に集計データを取得
      return aggregateStore.computeAggregate()
    },
    (data) => {
      // CSR時に集計データを復元
      aggregateStore.setData(data)
    }
  )
})

2. 認証情報やユーザー設定の初期化

サーバーで認証済みユーザーの情報を取得し、クライアントで状態を復元する例です。

export default defineNuxtPlugin((nuxtApp) => {
  const userStore = useUserStore()

  useHydration(
    'userInfo',
    () => {
      // SSRでユーザー情報を取得
      return userStore.fetchUserInfo()
    },
    (data) => {
      // CSRでユーザー情報をセット
      userStore.setUserInfo(data)
    }
  )
})

3. 外部APIから取得したデータのキャッシュ

APIコールをサーバーで一度だけ行い、クライアントで再利用することで無駄なリクエストを防ぎます。

export default defineNuxtPlugin((nuxtApp) => {
  const apiCache = new ApiCache()

  useHydration(
    'apiData',
    () => {
      // SSRでAPIデータを取得
      return apiCache.fetchData()
    },
    (data) => {
      // CSRでAPIデータを復元
      apiCache.setData(data)
    }
  )
})

よくある落とし穴・注意点

SSRとCSRの実行環境の違いに注意

get関数はサーバー側でのみ実行され、set関数はクライアント側でのみ実行されます。両者で同じデータ構造を扱うことが重要です。型の不一致や非同期処理の扱いに注意しましょう。

Hydrationのタイミングとパフォーマンス

useHydrationは初期Vueインスタンスの作成時にsetが呼ばれます。ここで重い処理を行うと初期表示が遅くなるため、必要最低限の処理に留めることが望ましいです。

冗長なAPIコールを防ぐための設計

サーバーで取得したデータをクライアントで再利用するための仕組みですが、状態の更新が頻繁に起こる場合はuseHydrationだけでは不十分なこともあります。リアクティブな更新は別途考慮しましょう。

Nuxtのpayloadサイズ増加に注意

大量のデータをuseHydrationで渡すと、Nuxtのpayloadが大きくなり、初期ロード時間に影響します。必要なデータだけを厳選して渡すことが重要です。

まとめ

useHydrationはNuxtのSSRとCSR間で状態を安全かつ効率的に同期するための強力なツールです。特にプラグインやモジュール開発で、サーバーで生成したデータをクライアントに引き継ぎたい場合に役立ちます。ただし、用途を見極めてuseStateとの使い分けを行い、パフォーマンスやデータサイズに配慮しながら活用することが重要です。

Nuxtのハイドレーションをより深く理解し、実務での課題解決に役立ててください。