[bug] using WAGMI with SSR (Next JS) is causing styling issues

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.3.5

Current Behavior

(copying from a discussion we previously created)

After bumping wagmi to 0.3.5 in our project, we started to face a number of styling issues (here’s an example 😆) due to a mismatch between the server-rendered HTML and the first render on the client side.

After some investigation, I discovered that this was due to hooks like useAccount returning isLoading as true during SSR, but as false on the client. Here’s an example of the return value of useAccount during SSR and on the client:

Before we upgraded to 0.3, the SSR and client output was consistent on first render. In this case it returned:

[
  {
    "loading": false
  },
  null
]

A few questions:

• Why is loading true on the server side. In my tests, it’s also true when autoConnect is set to false?
• Is there a recommended pattern for handling SSR in wagmi? Currently we’re manually patching this issue in many places, but I would prefer to help with a fix in wagmi 😄

I would guess that anyone using Next.js + WAGMI + Stitches will face a similar issue to us.

Expected Behavior

No response

Steps To Reproduce

Styling bug isn’t visible in the repo to reproduce, but mis-match between client/server output is highlighted in a console error.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://github.com/smhutch/wagmi-sandbox/blob/main/README.md

Anything else?

No response

[jxom]

Hey!

Sorry, I completely missed the discussion thread, thanks for opening an issue here (definitely easier to keep track).

Yeah, there are a couple of nuances of server/client hydration in wagmi. The main culprit of these hydration issues is that wagmi now caches responses and persists them to local storage (which is obviously not accessible on the server). This is not just a wagmi issue, but also for any library that persists state to local/session storage. Currently, there is no first-class solution for SSR in wagmi (but this is something that is on the roadmap – perhaps using cookies).

There are a couple of workarounds to resolve these hydration issues right now that have their trade-offs:

1. You can guard wagmi data in an isMounted variable (could have an useIsMounted hook or something). The trade-off here is that it’s a bit annoying to have isMounted variables floating everywhere (would be better to not think about it).

function Example() {
  const isMounted = useIsMounted();
  const { data } = useAccount();
  
  return (
    ...
    { isMounted && <div>{data?.address}</div> }
    ...
  )
}

1. The most naive solution would be to hoist this isMounted variable up and render your content after hydration (with a useIsMounted) hook. This can be seen in our examples. The trade-off here is content nested within the isMounted variable is not visible on the server.

3 (NOT RECOMMENDED). You can turn off local storage persistance completely, which will resolve everything, but comes with the trade-off that you lose data persistence on page load (and will consequently see FOUW – flash of unconnected wallet/account)

const client = createClient({
  ...
  persister: null
})

Why is loading true on the server side. In my tests, it’s also true when autoConnect is set to false?

This is probably a bug on the wagmi side - I’ll take a look!

[Hidde-Heijnen]

Also having this problem, I read that you wanted to explore this when next13 arrived, and since it is now in beta, I was wondering if you have an ETA on this feature? Kinda sucks to have to use workarounds in my apps, especially now since web3modal changed to the wagmi hooks in v2 (the previous hooks didn’t face this problem) and a lot of extra users will be facing these problems now.

Thanks in advance! @jxom