Is it possible to use persisted data from localStorage? #1202
-
I have a Remix app using a zustand store. This store is persisted in browser's localStorage. My issueMy code looks like this: const MyComponent = () => {
const { darkModeEnabled } = useStore(...)
console.log(darkModeEnabled)
return darkModeEnabled ? <Moon /> : <Sun />
} After a refresh, I read that this kind of issue is linked to SSR but I don't know how to adapt my code to support my persisted data. Does someone have an idea perhaps? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
When server-side-rendering, your code is executed in a JS environment that is not a browser (typically Node.js or Deno or Cloudflare Workers or ...). In particular, those environments do not have access to browser-only APIs such as What you need to do is to wrap your calls to browser-only APIs in |
Beta Was this translation helpful? Give feedback.
When server-side-rendering, your code is executed in a JS environment that is not a browser (typically Node.js or Deno or Cloudflare Workers or ...). In particular, those environments do not have access to browser-only APIs such as
localStorage
.What you need to do is to wrap your calls to browser-only APIs in
useEffect
s. Remix has an example in their docshttps://remix.run/docs/en/v1/guides/constraints#rendering-with-browser-only-apis