Are there any examples of "alternative solutions" for using SSR with atomWithStorage?

[saadq]

I was reading the atomWithStorage docs, and I was curious about this –

Alternative solutions are technically possible, but would require a brief "flicker" as the initialValue is swapped to the storedValue, which can result in an unpleasant user experience, so this solution is advised.

I was wondering if there was any examples of these alternative solutions that caused a flicker. In my case, the flicker wouldn't be much of an issue because it is just prefilling some form data and in theory the flicker would just cause the inputs to start as blank but then be prefilled so I was interested in trying out the alternative solution to be able to keep the form using SSR.

[dai-shi]

There's an undocumented option delayInit in storage.
If we enable it, it will use initialValue for the first render and then re-render with stored value.

import { atomWithStorage, createJSONStorage } from 'jotai/utils'

const storage = createJSONStorage(() => localStorage)
storage.delayInit = true

const const darkModeAtom = atomWithStorage('darkMode', false, storage)

[pix2D]

@dai-shi This works great, thanks! It would be amazing if this could be added to the docs, I think it should not only be mentioned on atomWithStorage docs but also the Next.js docs page (SSR use is common in Next.js) and perhaps on useHydrateAtoms also (on the latter 2 just as a side note "If you use atomWithStorage bla bla..."; although I'm not sure if atomWithStorage and useHydrateAtoms even work together?).

I ran into this and was pulling my hair there for a while wondering why I'm getting hydration failures before I remembered I'm using atomWithStorage (before that I was reading the Next.js docs page and useHydrateAtoms 🙈).

I can make a PR if you'd like?

[dai-shi]

Feel free to open PRs on docs.

tbh, I'm not sure delayInit is a good solution. It makes double renders, which is less performant. I think disabling SSR for components that depend on client data (localStorage) would be more appropriate.