How to Pass Initial Values to Zustand on the Server Side?

[sovetski]

I've been looking for a while, but I can't find anything concrete in the docs, PRs, issues, or discussions (maybe I haven't searched for the right information).

Basically, imagine I have a very simple store:

export const useNoteStore = create<NoteState>((set) => ({
	notes: [],
	setNotes: (notes: any) => set({ notes }),
	addNote: (note: any) => set((state) => ({ notes: [...state.notes, note] })),
	removeNote: (noteId: string) =>
		set((state) => ({ notes: state.notes.filter((note) => note.id !== noteId) })),
	setNote: (note: any | null) => {
		set((state) => ({
			notes: state.notes.map((n) => (n.id === note?.id ? note : n)),
		}));
	}
}));

What I simply want is to initialize the notes on page load server-side with data coming from the database, instead of doing this on the client side, as it's less optimized.

I also don't want to use setNotes (I mean on first page load, then it is ok) on the client side because that would cause a double re-render, and I don't find it very clean either.

To be clear: I am ONLY talking about hydrating the data on the server on the first page load, not managing the state on the server.

Can someone help me with this? Thanks in advance!

[dai-shi]

I think the canonical solution (at least for now) is to create a store in render and pass it down the tree using Context. I'm not sure if we have dedicated docs for it. @dbritto-dev ?

#3055 is the discussion to avoid such context usage.

[dbritto-dev]

@sovetski you should use createStore with create wouldn't be possible

[dbritto-dev]

@sovetski here you go -> https://stackblitz.com/edit/nextjs-and-zustand-persist-snefbl8b

[dbritto-dev]

@sovetski keep me in the loop

[sovetski]

@dbritto-dev thanks for the example! From what I see, the values are stored in the localstorage, how we can avoid this? And the implementation looks very verbose

Personally, one of the reasons I chose Zustand is because it is easy to write and understand, but with this solution it becomes a little illegible.. :/

[dbritto-dev]

@sovetski you can fork my example and remove the persist middleware if you don't need it, I'd say ts very verbose you can use combine middleware to only type your actions and infer everything else

[dbritto-dev]

@sovetski here you go -> https://stackblitz.com/edit/nextjs-and-zustand-persist-wvzwilgn?file=app%2F_components%2Fhome-page.tsx