SSR example about zustand HOT 13 CLOSED

Let me reopen this.

@jd327
#182 (comment)

I'm currently supplementing with createContext and useContext for anything SSR-related

Where can I find such examples with useContext, so that I can start learning? There must be something in the nextjs docs.

from zustand.

I think I would need some help for that, I don’t understand ssr good enough, but would gladly welcome prs.

from zustand.

I tried to set the default state with storeApi but This package is based on React Hooks and using useLayoutEffect hooks.
That is problem that makes server side rendering broken.
Is there any other way to set default state dynamically without update DOM?

from zustand.

could you explain why useLayoutEffect is a problem when it comes to SSR?

from zustand.

@drcmda

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.

Above error message keeps being logged.
I found react-redux uses useLayoutEffect only if window is defined or uses useEffect.

typeof window !== 'undefined' ? useLayoutEffect : useEffect

Can it be the solution to this case?

Related issue:

• facebook/react#14927
• https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85

from zustand.

yes, i guess that could be. could you try? you can copy this: https://unpkg.com/[email protected]/dist/esm/index.js into a local "zustand.js" and change it to useEffect. if it works i'll implement the patch.

from zustand.

@drcmda
Okay ! i will make a pr :D

from zustand.

can this issue be closed? does it work? thanks!

from zustand.

vercel/next.js#11222

from zustand.

That PR never landed in the repo 😞

from zustand.

Can we revisit this issue?? Seems there was never a solution implemented.

from zustand.

Hi, is it about hydration not working, or is it completely broken with next? Would you like to file a new issue please?

Note: useIsoLayoutEffect is just a hack to eliminate the warning message. It doesn't do anything for SSR.

from zustand.

I changed my mind. Let me close this and continue discussion in #182.

from zustand.