Nuxt/docs/content/1.docs/3.api/1.composables/use-hydration.md
Sébastien Chopin 90784f79d7
docs: new website design (#9007)
* docs: implement new website theme

* chore: rename dirs

* chore: update build

* lint fix

* chore: update deps

* fix: include node_modules in esbuild step

* chore: update deps

* Update .gitignore

* chore: update theme version

* up

* up

* fix: use svg for illustration

* chore: update to 0.0.12

* chore: force parse5 resolution

* stay with build

* feat: always display first home section

* Update yarn.lock

* chore: update theme

* fix lint

* docs: update home title

* chore: update website theme version

* Update docs/content/0.index.md

Co-authored-by: pooya parsa <pyapar@gmail.com>

* Update docs/content/0.index.md

Co-authored-by: pooya parsa <pyapar@gmail.com>

* up

* chore: bump theme version

* up

* chore: up

* up up and up

* chore: generate

* fix: boolean value

* feat: new images

* update again

* chore: up

* ouep

* chore: up

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Clément Ollivier <clement.o2p@gmail.com>
Co-authored-by: pooya parsa <pyapar@gmail.com>
2022-11-16 11:04:28 +01:00

1.1 KiB

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.

Type

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

You can use useHydration() within composables, plugins and components.

useHydration accepts three parameters:

  • key

    Type: String

    key is a unique key that identifies the data in your Nuxt application

  • get

    Type: Function

    get is a function that returns the value to set the initial data

  • set

    Type: Function

    set a function that receives the data on the client-side

Once the initial data is returned using the get function on the server side, you can access that data within nuxtApp.payload using the unique key that is passed as the first parameter in useHydration composable.

::ReadMore{link="/docs/getting-started/data-fetching"} ::