Server-rendered applications
The server and client must coordinate when persisted browser state enters a store.
Zustand · Pipe
skipHydration is a Zustand persist option that prevents automatic hydration when a store is initialized. Enable it when the application needs to call rehydrate() at a controlled time, such as during SSR.
skipHydration changes persist middleware startup behavior: it prevents the initial storage read and merge. The application must later invoke the store's persist.rehydrate() method, which is especially useful when an SSR app needs to control when persisted client state enters the store.
skipHydration: boolean | undefined| Name | Type | Description |
|---|---|---|
skipHydration | boolean | undefined | Boolean option controlling whether the initial persist hydration is skipped; the documented default is undefined. |
skipHydration opts out of that initial operation.skipHydration: true to suppress the middleware's automatic first hydration call.persist.rehydrate() method.rehydrate() leaves the store at its initial state.import { create } from 'zustand'
import { persist } from 'zustand/middleware'
type State = {
count: number
increment: () => void
}
export const useStore = create<State>()(
persist(
(set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}),
{ name: 'counter', skipHydration: true },
),
)
useStore.persist.rehydrate()Creates a persisted store without hydrating during initialization, then explicitly starts rehydration.
The server and client must coordinate when persisted browser state enters a store.
An app must delay the storage read until a later lifecycle point or event.
The application needs to ensure initialization completes before persisted data is merged.
skipHydration do?skipHydration is a persist option that prevents the middleware's first hydration call during store initialization. The application then controls the timing by invoking useStore.persist.rehydrate().
Follow-up: Why is this useful with SSR? It lets the application defer the client-side persisted-state read until an appropriate point, helping control the initial hydration sequence.
skipHydration?The option is boolean and is enabled by setting skipHydration: true inside the persist configuration. Without it, the store hydrates on initialization by default.
Follow-up: What happens if it is false? The normal initialization hydration occurs, so no explicit first rehydration call is needed.
After creating the store, call its persist API: await useBoundStore.persist.rehydrate(). This explicitly triggers retrieval of persisted data and its merge into the current state.
Follow-up: How does storage type affect hydration? Synchronous storage hydrates synchronously, while asynchronous storage hydrates asynchronously.
persistrehydratepersisting store dataSSR and Hydration