Nuxt/docs/3.api/2.composables/use-hydration.md

title	description	links
useHydration	Allows full control of the hydration cycle to set and receive data from the server.	label icon to size Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/hydrate.ts xs

::note This is an advanced composable and is mostly used by Nuxt modules. ::

::note useHydration is designed to ensure state synchronization and restoration during SSR. If you need to create a globally reactive state that is SSR-friendly in Nuxt, useState is the recommended choice. ::

useHydration is a built-in composable that provides a way to set data on the server side every time a new HTTP request is made and receive that data on the client side. This way useHydration allows you to take full control of the hydration cycle.

The data returned from the get function on the server is stored in nuxtApp.payload under the unique key provided as the first parameter to useHydration. During hydration, this data is then retrieved on the client, preventing redundant computations or API calls.

useHydration() can be used within composables, plugins, and components.

Usage

::code-group

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 default defineNuxtPlugin((nuxtApp) => {
  const myStore = new MyStore()

  useHydration(
    'myStoreState', 
    () => myStore.getState(), 
    (data) => myStore.setState(data)
  )
})

::

Type

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

Parameters

• key: A unique key that identifies the data in your Nuxt application.
• get: A function executed only on the server (called when SSR rendering is done) to set the initial value.
• set: A function executed only on the client (called when initial vue instance is created) to receive the data.