Zustand 4.5.0 state works differently in renderToStaticMarkup

[AlecBlance]

Our app works well with the 4.4.7. Since the new 4.5.0 update came, it doesn't display the same data it used to have. I have attached a simple example to show how we use it. Is it because 4.5.0 , serverState will be used by react on the first client render? Are there alternative ways? Thank you!

[dai-shi]

So, I assume you use persist middleware, because that's the only change between 4.4.7 and 4.5.0.

Basically, we improved it for SSR. Hopefully, @TkDodo @dbritto-dev @charkour can help.

My suggestion is to put increasePopulation inside useEffect, because render function must be pure.

[TkDodo]

@dai-shi we also changed how uSES implements getServerSnapshot, which I think is relevant here. I also thought that the App function isn't pure, but I don't think App is really the function here that gets rendered? It's the <BearCounter /> that is passed to renderToStaticMarkup.

The problem likely is that renderToStaticMarkup just reads the getServerSnapshot, which is now "frozen" to the time of the store creation, so the update to increasePopulation() isn't seen. That is largely on purpose, because we don't expect updates to happen to the store on the server (which might be a wrong assumption). We did this so the first CSR will always have the same output as the initial SSR. However, I think we didn't account for the shown cases where multiple updates happen in a server env.

so the problem is really here where we capture initialState, in vanilla.ts:

zustand/src/vanilla.ts

Lines 82 to 83 in be31b53

	const getInitialState: StoreApi<TState>['getInitialState'] = () =>
	initialState

it's a tricky situation because if we were to add a check if we are running on the server and allow updates to the store (thus always returning a call to getState on the server, basically changing it to:

const getInitialState: StoreApi<TState>['getInitialState'] = isServer
  ? getState
  : () => initialState

we could get hydration mismatches again with exactly those in-between updates.

---

So generally, I would recommend to not call setters on the server but to create the store with the initial value (e.g. count: 1) that you want to render instead.

[dai-shi]

Yeah, I don't think we should mutate store after creating on the server.