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.
-
|
Though you might want to take an entirely different route (no pun intended) and ditch zustand altogether by splitting your CSS files with the Then, use something like this Note that the toggle is a custom element which I haven't worked with myself. React historically has a couple of problems with those, although that's changing with React 18 from my understanding. In any case, you could give it a try and see if it works as expected |
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
useEffects. Remix has an example in their docshttps://remix.run/docs/en/v1/guides/constraints#rendering-with-browser-only-apis