CODEWITHSUNDEEP
reactjsnext.jshydration
Sylv99
Sylv99

Reputation: 185

NextJS hydration issue

I have a NextJS app where I am getting this error:

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <h1> in <h3>.

Even after looking at the error page, I am not clear what I am doing wrong.

app/page.tsx:

'use server'
import BtnClient from "@components/BtnClient"

const Home: React.FC = async () => {

  const logstate:number = 0;

  return (
    <div>
      <h1>MAIN PAGE: SERVER RENDER</h1>

      <h3>{logstate==1 && <h1>LOGGED IN</h1>}</h3>
      <h3>{logstate==0 && <h1>LOGGED OUT</h1>}</h3>

      <BtnClient />

    </div>
  );
};

export default Home;

BtnClient.tsx:

'use client';

const BtnClient = () => {

      function doit()
      {}

  return (
      <div>
        <button onClick={doit}> click </button>
      </div>
  );
}

export default BtnClient;

Upvotes: 0

Views: 48

Answers (1)

Stefan
Stefan

Reputation: 974

This error appears too, if HTML is not valid.

<h3>{logstate==1 && <h1>LOGGED IN</h1>}</h3>

You must not nest <h1> inside <h3>

Upvotes: 1

Related Questions