new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Nuxt · API · all subjects

composables/usehydration

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useHydration composable signature

The useHydration composable has the signature: export function useHydration<T> (key: string, get: () => T, set: (value: T) => void): void. It takes three parameters: a unique key string, a get function that returns type T, and a set function that accepts type T and returns void. It does not return any value.

useHydration purpose

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

useHydration key parameter

The key parameter is a unique string that identifies the data in the Nuxt application. The data returned from the get function on the server is stored in nuxtApp.payload under this key, and during hydration this data is retrieved on the client.

useHydration get parameter

The get parameter is a function that returns type T. It is executed only on the server when SSR rendering is done, and is used to set the initial value that will be hydrated on the client.

useHydration set parameter

The set parameter is a function that accepts a value of type T and returns void. It is executed only on the client when the initial Vue instance is created, and is used to receive the data from the server.

useHydration use case and audience

useHydration is an advanced composable primarily designed for use within plugins, mostly used by Nuxt modules. It is recommended to use useState instead if you need to create a globally reactive state that is SSR-friendly in Nuxt.

useHydration prevents redundant computations

By storing data in nuxtApp.payload on the server and retrieving it on the client during hydration, useHydration prevents redundant computations or API calls.

useHydration plugin example

Here is an example of using useHydration within a Nuxt plugin: export default defineNuxtPlugin((nuxtApp) => { const myStore = new MyStore() useHydration( 'myStoreState', () => myStore.getState(), data => myStore.setState(data), ) }) This example shows how to use useHydration to hydrate a store's state across server and client.

Give your agent this brain