Hydration failed because initial UI does not match what was rendered on the server

This error happens when there is a mismatch between the React tree rendered during the first render in the browser (called hydration), and the React tree that was pre-rendered from the server.

Hydration is the process of React converting pre-rendered HTML into an interactive application by attaching event handlers.

In general these errors happen with components that should only be rendered in the browser (i.e. components that depend on state like the user being logged in or not, like the navigation).

To easily resolve this, you can wrap those components with our own IsBrowser component, exported from sdk-react-core.

import { IsBrowser } from "@dynamic-labs/sdk-react-core";

const MyComponent = () => {
    return (
        <IsBrowser>
            <YourComponents>
        </IsBrowser>
    )
};