useHydrationは、HTTPリクエストが行われるたびにサーバー側でデータを設定し、そのデータをクライアント側で受信する方法を提供する組み込みのコンポーザブルです。このようにして、useHydrationはハイドレーションサイクルを完全に制御することを可能にします。

サーバー上でget関数から返されるデータは、useHydrationへの最初のパラメータとして提供されたユニークなキーの下でnuxtApp.payloadに保存されます。ハイドレーション中に、このデータはクライアントで取得され、冗長な計算やAPIコールを防ぎます。

使用法

export default defineNuxtPlugin((nuxtApp) => {
  const myStore = new MyStore()

  if (import.meta.server) {
    nuxt.hooks.hook('app:rendered', () => {
      nuxtApp.payload.myStoreState = myStore.getState()
    })
  }

  if (import.meta.client) {
    nuxt.hooks.hook('app:created', () => {
      myStore.setState(nuxtApp.payload.myStoreState)
    })
  }
})

型

useHydration <T> (key: string, get: () => T, set: (value: T) => void) => void

パラメータ

• key: Nuxtアプリケーション内のデータを識別するユニークなキー。
• get: サーバー上でのみ実行される関数（SSRレンダリングが完了したときに呼び出される）で、初期値を設定します。
• set: クライアント上でのみ実行される関数（初期Vueインスタンスが作成されたときに呼び出される）で、データを受信します。