useHydration é um composable embutido que fornece uma maneira de definir dados no lado do servidor toda vez que uma nova solicitação HTTP é feita e receber esses dados no lado do cliente. Dessa forma, useHydration permite que você tenha controle total do ciclo de hidratação.

Os dados retornados pela função get no servidor são armazenados em nuxtApp.payload sob a chave única fornecida como o primeiro parâmetro para useHydration. Durante a hidratação, esses dados são então recuperados no cliente, evitando cálculos redundantes ou chamadas de 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: Uma chave única que identifica os dados na sua aplicação Nuxt.
• get: Uma função executada apenas no servidor (chamada quando a renderização SSR é concluída) para definir o valor inicial.
• set: Uma função executada apenas no cliente (chamada quando a instância inicial do Vue é criada) para receber os dados.