Nuxt Nation カンファレンス開催! 11月12日~13日

useHydration

ハイドレーションサイクルの完全な制御を可能にし、サーバーからデータを設定および受信します。

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

これは高度なコンポーザブルであり、主に内部(useAsyncData)またはNuxtモジュールで使用されます。

シグネチャ
useHydration <T> (key: string, get: () => T, set: (value: T) => void) => {}

コンポーザブル、プラグイン、コンポーネント内でuseHydration()を使用できます。

useHydration は3つのパラメーターを受け入れます

  • key: Nuxtアプリケーションでデータを識別する一意のキー
    • : String
  • get: 初期データを設定する値を返す関数
    • : Function
  • set: クライアントサイドでデータを受け取る関数
    • : Function

サーバーサイドでget関数を用いて初期データが返されると、useHydrationコンポーザブルの最初の引数として渡された一意のキーを使用して、nuxtApp.payload内でそのデータにアクセスできます。

ドキュメント > はじめに > データ取得で詳細をご覧ください。