Using subscribe with localStorage in next.js

[marraleks]

How can I use a syntax like this to set a store that persist data on refresh in a next.js application?

import { proxy, subscribe } from 'valtio'


interface Store {
    text: string,
    count: number,
}

const storedStateString = localStorage.getItem('store');
const initialState = storedStateString ? JSON.parse(storedStateString) : { count: 0, text: 'Hello' };

const store = proxy<Store>(initialState)

subscribe(store, () => {
        localStorage.set("store", JSON.stringify(store))
})

export default store

[dai-shi]

That should work in CSR. So, you want to do something in SSR?
Can anyone help?

[marraleks]

I made it work like this https://codesandbox.io/s/valtio-next-localstorage-cp2ek?file=/pages/index.js
I added suppressHydrationWarning to the elements that get snapshotdata, else i get the error message: Warning: Text content did not match. Server: "0" Client.
Is this intented behavior?

[dai-shi]

Yeah, because localStorage is client only, there's mismatch in hydration. So, suppressHydrationWarning seems to make sense. I don't know if there's any best practice to use localStorage in nextjs. If there were, we could do the same.

The alternative is to initialize the state from localStorage in useEffect.

const store = proxy<Store>({ count: 0, text: 'Hello' })

subscribe(store, () => {
  localStorage.set("store", JSON.stringify(store))
})

  // in home component
  useEffect(() => {
    Object.assign(store, localStorage.getItem('store'))
  }, [])