Next.js compatibility

[mildfuzz]

One of the limitations of next.js is that the HTML produced by the initial template must match that of the server. This leads the following contrived issue.

import type { NextPage } from 'next'
const isBrowser = () => !!global?.window
const data = isBrowser() ? 'browser' : 'server'
const Home: NextPage = () => {  return (
      <p data-ref={data}>{data}</p>
  )
}
export default Home

This code produced the following HTML: <p data-ref="server">browser</p>

Now, when we apply this to recoil-persist, what we are seeing is situations where, because the storage is not available to the server, any scenarios where we use state to derive the HTML parameter, we are required to manually force an additional render (by adding the recoil state into a component state and updating on first tick with an effect).

I wonder whether there is a way to improve compatibility at this end? Perhaps setting persisted state on first tick rather than on init would force a render and therefore not require the end user to do so?

Happy to help with this, but have been struggling to get the plugin building locally.

[cnotethegr8]

I explained my solution for this here. It would be nice if this project could provide a similar solution.