SSR example

[mcansh]

I think I almost have it working using a tweaked version of the redux next.js example, but the state gets wiped out on the client

[drcmda]

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

[codemilli]

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?

[drcmda]

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

[codemilli]

@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:

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

[drcmda]

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.

[codemilli]

@drcmda
Okay ! i will make a pr :D

[themre]

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

[janek26]

vercel/next.js#11222

[ahmedu007]

That PR never landed in the repo 😞

[maxwaiyaki]

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

[dai-shi]

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.

[dai-shi]

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.

[dai-shi]

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