useHydration

ソース
ハイドレーションサイクルを完全に制御し、サーバーからデータを設定および受信できるようにします。
これは、主にプラグイン内での使用を目的とした高度なコンポーザブルであり、ほとんどがNuxtモジュールで使用されます。
useHydrationは、SSR中の状態同期と復元を保証するように設計されています。NuxtでSSR対応のグローバルなリアクティブ状態を作成する必要がある場合は、useStateが推奨される選択肢です。

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)
    })
  }
})

タイプ

署名
export function useHydration<T> (key: string, get: () => T, set: (value: T) => void): void

パラメーター

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