Persist using initial state #2619
-
|
Hello, Layout.tsx The problem here is that when I use the deprecated "getStorage" with localStorage, it works well, when I refresh my store gets immediatly populated with the localStorage values if it exists. 
How should I make it work ? How to avoid the store using the default store before being sure that localStorage isn't populated ? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 21 replies
-
|
I am having the same problem. I am following the pattern in the docs to create a store with initialization parameters and provide it through a context provider. For anyone interested in a minimal example, see here. Some details:
// [id]/page.tsx
import { Counter } from "@/components/counter";
import { CounterStoreProvider } from "@/components/provider";
type Props = {
params: {
id: string;
};
};
export default function ({ params }: Props) {
return (
<CounterStoreProvider count={Number(params.id)}>
<Counter />
</CounterStoreProvider>
);
}The persistence is keyed by the initial count // store/counter.ts
export const createCounterStore = (initState: CounterState) => {
return createStore<CounterStore>()(
persist(
(set) => ({
count: initState.count,
decrementCount: () => set((state) => ({ count: state.count - 1 })),
incrementCount: () => set((state) => ({ count: state.count + 1 })),
}),
{
name: `count-page-${initState.count}`,
storage: createJSONStorage(() => localStorage),
},
),
);
};The provider component is set up the same way in the docs. When you increase the counter and then refresh the page, the counter starts as the initial value and then quickly jumps to the stored value. Screenshare.-.2024-06-26.1_01_15.AM.mp4I tried manually rehydrate the store, but it does not work. It also seems that this only applies to dev server, in prod the counter starts straight from the storage value. |
Beta Was this translation helpful? Give feedback.
-
|
@qiushiyan here you go: https://stackblitz.com/edit/nextjs-and-zustand-persist?file=README.md
|
Beta Was this translation helpful? Give feedback.
-
|
@dbritto-dev why having to handle hydration manually if we didn't had to before ? (with getStorage I mean) |
Beta Was this translation helpful? Give feedback.
-
|
@HermanPierre that's wrong, you should always had to handle that. There's no localStorage on server and you need to make sure that server and client first render are the same. On the client after first render you could hydrate and get the current state from the browser.
|
Beta Was this translation helpful? Give feedback.
-
|
@dbritto-dev Oh okay but I never wanted to have the store on the server side, I want it on the client side. It seems way harder to handle user experience data on the server side than on the client side |
Beta Was this translation helpful? Give feedback.
-
|
@HermanPierre yes and no, you need to know the trade-offs |
Beta Was this translation helpful? Give feedback.
-
|
@dbritto-dev okay I've watched a lot of videos on NextJS last few hours I understand better, thanks :) |
Beta Was this translation helpful? Give feedback.
-
|
Just ping me if you have any questions |
Beta Was this translation helpful? Give feedback.
-
|
I'm having the same problem. I cannot get the initial value immediately when the page is refreshed. In this code, I have to set the editor's value and change the value when the editor updates. but I cannot get correct value for editor. 
Here's the same case in a different version. 4.4.7 version
4.5.0 version
|
Beta Was this translation helpful? Give feedback.
-
|
@HermanPierre we mentioned that in our nextjs guide, lmk if something isn't clear |
Beta Was this translation helpful? Give feedback.
-
|
but in a nutshell you should avoid next things:
|
Beta Was this translation helpful? Give feedback.
-
Okay thanks, the last two are easy to avoid but for the first one i'm trying as much as I can to avoid having global stores in my app but it ain't always easy ahah |
Beta Was this translation helpful? Give feedback.
-
|
@HermanPierre yeah, is not easy. Actually, we are working on updating docs content and adding some learn docs stuff to talk about ways of dealing with that |
Beta Was this translation helpful? Give feedback.
-
|
sooo but this seems super super scuffed :( I just want to read state and have the data immediately |
Beta Was this translation helpful? Give feedback.
@HermanPierre that's wrong, you should always had to handle that. There's no localStorage on server and you need to make sure that server and client first render are the same. On the client after first render you could hydrate and get the current state from the browser.