> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nuxt/nuxt/llms.txt
> Use this file to discover all available pages before exploring further.

# useHydration

> Allows full control of the hydration cycle to set and receive data from the server.

`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.

<Note>
  This is an advanced composable, primarily designed for use within plugins, mostly used by Nuxt modules.
</Note>

<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.
</Note>

## Usage

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.

```ts [With useHydration] theme={null}
export default defineNuxtPlugin((nuxtApp) => {
  const myStore = new MyStore()

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

```ts [Without useHydration] theme={null}
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)
    })
  }
})
```

## Parameters

<ParamField path="key" type="string" required>
  A unique key that identifies the data in your Nuxt application.
</ParamField>

<ParamField path="get" type="() => T" required>
  A function executed only on the server (called when SSR rendering is done) to set the initial value.
</ParamField>

<ParamField path="set" type="(value: T) => void" required>
  A function executed only on the client (called when initial Vue instance is created) to receive the data.
</ParamField>

## Return Values

This composable does not return any value.

## Type

```ts theme={null}
export function useHydration<T> (
  key: string,
  get: () => T,
  set: (value: T) => void
): void
```