Hydration failed nextjs 13.2.0

Question

I am quite new to nextjs and need some help from professionals who know how to do it correctly. I have the following problem with this simple component:

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

"use client";
import React, { useState } from "react";

function ButtonToggle() {
  const [showSecondButton, setShowSecondButton] = useState(false);

  const toggleButton = () => {
    setShowSecondButton(!showSecondButton);
  };

  return (
    <div className="absolute top-1/2">
      <button onClick={toggleButton}>Click me!</button>
      {showSecondButton && <button>show second button!</button>}
    </div>
  );
}

export default ButtonToggle;

The problem only occurs when I press the button quickly after refreshing or when I delay the data connection via throttling. What is the correct way to avoid such errors? Should I save the button as a component and import it via dynamic import (disabling SSR)?

Here some infos about the versions:"react": "18.2.0","next": "13.2.4". I use the experimental app dir.

I have already tested a bit and found out that when I turn off SSR the button appears only when the JS is loaded. But is this the usual procedure? Classic use case for my example would be a burger menu which can be toggled. This should appear as fast as possible but also be clickable.

Hydration failed nextjs 13.2.0

0 Answers0