useHydration es un composable incorporado que proporciona una forma de establecer datos en el lado del servidor cada vez que se realiza una nueva solicitud HTTP y recibir esos datos en el lado del cliente. De esta manera, useHydration te permite tomar el control total del ciclo de hidratación.

Los datos devueltos por la función get en el servidor se almacenan en nuxtApp.payload bajo la clave única proporcionada como el primer parámetro a useHydration. Durante la hidratación, estos datos se recuperan en el cliente, evitando cálculos redundantes o llamadas a la API.

Uso

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

Tipo

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

Parámetros

• key: Una clave única que identifica los datos en tu aplicación Nuxt.
• get: Una función ejecutada solo en el servidor (llamada cuando se completa el renderizado SSR) para establecer el valor inicial.
• set: Una función ejecutada solo en el cliente (llamada cuando se crea la instancia inicial de Vue) para recibir los datos.