Usage without React Context with Next.js?

[dai-shi]

Currently, our guide suggests to use React Context with Next.js.

This is to avoid misusing module state on the server (SSR).

zustand/docs/guides/nextjs.md

Lines 28 to 29 in fec9135

	- **No global stores** - Because the store should not be shared across requests, it should not be defined
	as a global variable. Instead, the store should be created per request.

However, this only applies if we write to the store on the server. Is it correct?
In that case, if we can somehow prohibit updating the store on the server, is the usage of Zustand without React Context acceptable?

@dbritto-dev @charkour @TkDodo

[TkDodo]

I would say so, yes. The problem about creating a store on the server is that is will be shared between users. If we can't write to it, it will always be empty, so nothing would be shared.

[dbritto-dev]

@dai-shi I'd that due to Next.js supports SSR (runtime) and SSG (build time) that's the safe way to create stores

[dai-shi]

Can imagine a specific case that the approach breaks? Or, is it more like a hypothetical one?

[TkDodo]

@dai-shi I think the initialState for the store could still be derived from some request specific state? If you can only have a completely empty store, it doesn't really make sense to SSR that at all ...

[dai-shi]

But skipping SSR isn't very easy, right? Maybe there are several use cases. (Originally thought two but maybe more than that.)

[dai-shi]

could still be derived from some request specific state?

Yeah, that's possible. It should be rare though.

Any idea to mitigate it? Just document so?

@dbritto-dev @TkDodo

[dbritto-dev]

@dai-shi we can document it

[dai-shi]

if we can somehow prohibit updating the store on the server

One idea:

import { create } from 'zustand';

const ssrSafe = (config, isSSR = typeof window === 'undefined') => (set, get, api) => {
  if (!isSSR) {
    return config(set, get, api);
  }
  const ssrSet = () => {
    throw newError('Cannot set state of Zustand store in SSR');
  };
  api.setState = ssrSet;
  return config(ssrSet, get, api);
};

export const useFooStore = create(ssrSafe(...));