Warning: Expected server HTML to contain a matching <div> in <div>.

[SergiiMost]

Hi, I have a navbar , and it displays a different UI based on if a user is logged in or not. I decided to keep track of if user is logged in by reading a cookie. Here is a relevant part of code:

export default function Navbar() {
  let loggedin
  if (typeof window !== undefined) {
    loggedin = getCookie('auth')
  }
  return (
   {!loggedin?
    // one UI logic
    :
   //different UI logic
  }
 )
}

getCookie is a simple function that is using npm package js-cookie :

export const getCookie = (name) => cookies.get(name)

My issue is that when I hard reload a page or load it for the first time I get this warning in my console and some part of CSS is broken :

react-dom.development.js:88 Warning: Expected server HTML to contain a matching <div> in <div>.
    in div (at Navbar.js:68)
    in div (at Navbar.js:67)
    in ul (at Navbar.js:34)
    in div (at Navbar.js:26)
    in nav (at Navbar.js:25)
    in Navbar (at Layout.js:12)
    in div (at Layout.js:11)
    in Layout (at pages/index.js:18)
    in Home (at _app.js:13)
    in UserProvider (at _app.js:13)
    in MyApp
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

After I navigate on a client to any other page this warning does not appear any more and CSS is fixed. I was able to pinpoint the issue, and if I comment out this part in my code the error is gone :

  if (typeof window !== undefined) {
    loggedin = getCookie('auth')
  }

Of course, my navbar logic is broken in this case. I realize that there is no cookies on the server side, therefore to prevent it running on the server I check where the code is executed in this line if (typeof window !== undefined){} . However, by adding console.log() inside of the if statement I can see that it's running on the server too.

What am I doing wrong? Why do I get this warning and have some broken CSS? Why is if statement running on the server in this case? I appreciate any help.

[lfades]

Code that is only supposed to run in the browser should be executed inside useEffect. That's required because the first render should match the initial render of the server. If you manipulate that result it creates a mismatch and React won't be able to hydrate the page successfully.

When you run browser only code (like trying to access window) inside useEffect, it will happen after hydration 👍

[DavidVaness]

I have this exact issue @aegiz, what solution did you come up with?
I did stumble upon this advice which uses useEffect like advised
https://dev.to/adrien/creating-a-custom-react-hook-to-get-the-window-s-dimensions-in-next-js-135k

[aegiz]

Ahah inception 👯
I am the author of this post, so I vouch 100% for this solution! 😇

[meotimdihia]

reply useEffect for render UI cause problem with Scroll Restoration - when fetching data on the client to render.
#3303 (comment)

[tyrw]

Ahah inception 👯
I am the author of this post, so I vouch 100% for this solution! 😇

@aegiz That's living the dream right there

[Pavan-Rajesh]

in nextjs you can use next/dynamic to turn of ssr

[meotimdihia]

This snippet solved the problem.

import {useState, useEffect} from 'react'

export default function Loading() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
      setMounted(true)
  }, [])
  
  return mounted && <div>Run on client only</div>
 }

Check the comments below if you have a problem with scroll restoration.

[Annukul]

@meotimdihia Cool man, this is so simple and easy. I spent hours on this issue and you resolved it in just two lined. Thanks a lot!!

[Leleking]

This worked for me too, Thanks

[Haliaa]

WOOOW🎉, it's like the magic 🥹 Thank yooou!!!!!!!!!!!!!!!

[Kogomre]

What about useLayoutEffect, with this code, it stops working correctly with React portal and you need to use setTimeout with zero delay for it to start working correctly. Has anyone encountered such a problem and how did you solve it?

[Ys-OoO]

This method seems to violate the purpose of SSR, which will cause the server-side HTML to be empty for the first time.

[neo-sam]

react doc about suppressHydrationWarning

<div suppressHydrationWarning={true}>
    { process.browser && <MyAwesomeComponent /> }
    <div>some other component</div>
</div>

Make sure you are aware of the following if you decide to go with this approach:

• It only works one level deep (not a problem in this case)
• This should be avoided if at all possible, only to be used as last resort - me paraphrasing the React team
• All the patching could impact site performance in some scenarios

thanks to https://blog.hao.dev/render-client-side-only-component-in-next-js

[gaurav5430]

I think the solutions discussed here work fine when you have to hide / not render the component at all on the server, but what if you have to render a different variant of the component on server vs client (say, responsive design, where based on screen size we decide which variant of the component to render. We don't detect the device type on server and hence it always renders the desktop view, while on client, on mobile, it just rehydrates, finds a mismatch and then ends up recreating the whole DOM once again)

[alecrae]

@gaurav5430 I used https://github.com/artsy/fresnel for this problem. It's indeed a tricky problem without an elegant solution

[Yrobot]

Yea, i am comfused about how we handle the browser only logic on nextjs.
i use useMemo to calculate some based on document, but with nextjs i have to put this logic into useEffect and use useState to cus rerender.
It could be great if anyone have better solution.

[SofianeDjellouli]

Did it with @meotimdihia's solution, then replaced it with simple use of @next/dynamic:

@@ -1,15 +1,13 @@
 import type { NextPage } from "next";
 import Head from "next/head";
-import { useState, useEffect } from "react";
-import { make as App } from "../src/components/app/App.bs";
+import dynamic from "next/dynamic";
 
-const Home: NextPage = () => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+const App = dynamic<object>(
+  () => import("../src/components/app/App.bs").then((mod) => mod.make),
+  { ssr: false },
+);
 
+const Home: NextPage = () => {
   return (
     <>
       <Head>
@@ -18,7 +16,7 @@ const Home: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      {mounted && <App />}
+      <App />
     </>
   );
 };```

[tuankietcoderr]

this worked for me

[meotimdihia]

@tuankietcoderr it used for a different case.
Dynamic import means the browser will load the script in a separate request and it will load after the current component => It is often used when the component is not really necessary to display at the first rendering (e.g.: comments component)

[abacaj]

In my case the warning appeared when I had a protected page client side.
To resolve I wrap any client side protected page with a client only component.

ClientOnly.tsx

export default function ClientOnly({
  children,
}: {
  children: React.ReactElement;
}) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return children;
}

Protected.tsx

export default function Protected({
  children,
}: {
  children: React.ReactElement;
}) {
  const router = useRouter();
  const session = api.auth.session();

  if (!session) {
    router.push('/auth/login');
    return null;
  }

  return children;
}

Usage

    <ClientOnly>
      <Protected>
         <div>Protected content here</div>
      </Protected>
    </ClientOnly>

[adityadigant]

[Muntari29]

thank you. brothers

I also share my examples.
This example worked, at least for me.

Next.JS & TypsScript
Before

import ReactDOM from 'react-dom';

interface IPortal {
  children: React.ReactNode;
  selector: string;
}

const Portal = ({ children, selector }: IPortal) => {
  const element =
    typeof window !== 'undefined' && document.querySelector(selector);
  return element && children ? ReactDOM.createPortal(children, element) : null;
};

export default Portal;

Affter

import { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

interface IPortal {
  children: React.ReactNode;
  selector: string;
}

const Portal = ({ children, selector }: IPortal) => {
  const [mounted, setMounted] = useState(false);
  const [element, setElement] = useState<Element | null>(null);

  useEffect(() => {
    setMounted(true);
    setElement(document.querySelector(selector));
    return () => setMounted(false);
  }, []);

  return element && mounted ? ReactDOM.createPortal(children, element) : null;
};

export default Portal;

[GodAlmighty990]

Hi I was able to solve an Error I was having with FontAwesome Icons and Next.js. I was getting the Error

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

And in console.log in the Browser it was showing

Warning: Expected server HTML to contain a matching in

.

I applied a solution above to have a state called mounted, setMounted and trigger fontAwesome icon to render only when mounted is true Here is my component

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Row, Col } from 'reactstrap';

const AboutUsProcess = ({ icon, iconText, color, title, description, image, lottie, inverse, children }) => {


  const [mounted, setMounted] = useState(false);
  useEffect(() => {
      setMounted(true)
  }, [])
  
  
  return  (
    <Row className="flex-center">
      <Col md lg={5} xl={4} className={classNames('pl-lg-6', { 'order-md-2': inverse })}>
      </Col>
      <Col md lg={5} xl={4} className="mt-4 mt-md-0">
        <h5 className={`text-${color}`}>
         
            <FontAwesomeIcon icon={icon} className="mr-2" />
            
            {iconText}
        </h5>
        <h3>{title}</h3>
        <p>{description}</p>
        {children}
      </Col>
    </Row>
  );
};


export default AboutUsProcess;

[GodAlmighty990]

Take Note: WHEN YOU RENDER SOMETHING WITH useEffect, THAT IS NOT A SERVER SIDE RENDER. TRY TO RENDER AS LITTLE AS POSSIBLE WITH useEffect TO KEEP YOUR SEO GOOD

[DevJubr]

if you are using next js 13 and face this problem then you have to go for the styled-component.

[cwtuan]

Why document or window is not defined in useMemo? Here is explanation and solution:

function MyComponent() {
  // useMemo will run in server-side & client-side
  // Error: window is not defined in server
  const color = useMemo(()=> {
    return window.globalColor; 
  }, [])
  return <h1 className={`title ${color}`}>Hello World!</h1>
}

To fix this issue, you need to use useEffect to run the render only in the client-side.
Here's an example code snippet:

function MyComponent() {
  const [color, setColor] = useState()
  useEffect(() => {
    setColor(window.globalColor)
  }, [])
  return <h1 className={`title ${color}`}>Hello World!</h1>
}

Furthermore, wrap the solution above in a hook

function useClientMemo<T>(fn: () => T, deps?: DependencyList): T {
  const [data, setData] = React.useState<T>();
  React.useEffect(() => {
    setData(fn());
  }, deps);
  return data;
}
export default useClientMemo;

Then, simply use:

function MyComponent() {
  const color = useClientMemo(()=> {
    return window.globalColor; 
  }, [])
  return <h1 className={`title ${color}`}>Hello World!</h1>
}

Explanation:

• useEffect is executed only during client-side rendering.
• useMemo is executed during both client-side rendering and server-side rendering.

[davidAlmonteV]

Also watch out about browser extensions that display elements in the page.

I had an extension that used to display an icon in form inputs, and that was the problem as it was modifying the html.

[omedinapr]

Thanks! My "Last Pass" extension was giving me this problem.

[lunarW1TCH]

My god THANK YOU! I spent way too long trying to solve this problem and as always the last thing I thought to check were browser extensions.

[AssetGA]

Check you Layout component and put all in body