SSR
Wagmi uses client-only external stores (such as localStorage
and mipd
) to show the user the most relevant data as quickly as possible on first render.
However, the caveat of using these external client stores is that frameworks which incorporate SSR (such as Next.js) will throw hydration warnings on the client when it identifies mismatches between the server-rendered HTML and the client-rendered HTML.
To stop this from happening, you can toggle on the ssr
property in the Wagmi Config.
import { createConfig, http } from '@wagmi/vue'
import { mainnet, sepolia } from '@wagmi/vue/chains'
const config = createConfig({
chains: [mainnet, sepolia],
ssr: true,
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
Turning on the ssr
property means that content from the external stores will be hydrated on the client after the initial mount.
Persistence using Cookies
As a result of turning on the ssr
property, external persistent stores like localStorage
will be hydrated on the client after the initial mount.
This means that you will still see a flash of "empty" data on the client (e.g. a "disconnected"
account instead of a "reconnecting"
account, or an empty address instead of the last connected address) until after the first mount, when the store hydrates.
In order to persist data between the server and the client, you can use cookies.
1. Set up cookie storage
First, we will set up cookie storage in the Wagmi Config.
import {
createConfig,
http,
cookieStorage,
createStorage
} from '@wagmi/vue'
import { mainnet, sepolia } from '@wagmi/vue/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
ssr: true,
storage: createStorage({
storage: cookieStorage,
}),
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
2. Hydrate the cookie
Next, we will need to add some mechanisms to hydrate the stored cookie in Wagmi.
Nuxt.js
Would you like to contribute this content? Feel free to open a Pull Request!
Vanilla SSR
Would you like to contribute this content? Feel free to open a Pull Request!