Next.js Discord

Discord Forum

Can someone PLEASE explain how Hydration failed because the initial UI error in a Server Component

Unanswered
Amur catfish posted this in #help-forum
Open in Discord
Amur catfishOP
It's saying Hydration failed because the initial UI does not match what was rendered on the server...I thought this would just happen in client components not on server components. Can someone please explain to me how this works? I figured out how to remove this error on client by putting a loading flag to make sure browser was fully loaded before displaying my page. However for a server component I cant have state to do that check...please any help would be unbelievably appreciated i'm a Next newbie

6 Replies

Black carp
Can you post a snippet of the component that is giving you the error?
@Black carp Can you post a snippet of the component that is giving you the error?
Amur catfishOP
export default function LoginPage() {
    return (
      <div className={`${besley.className} flex justify-center items-center h-screen`}>
        <Link
        href="/"
        className="absolute left-8 top-8 py-2 px-4 rounded-md no-underline text-lg font-bold text-black bg-btn-background hover:bg-btn-background-hover flex items-center group"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="30"
          height="30"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-1"
        >
          <polyline points="15 18 9 12 15 6" />
        </svg>{" "}
        Back
      </Link>
      <form className="bg-white p-8 rounded shadow-lg max-w-lg w-full" method="POST" action="auth/signup">
          <h2 className="text-2xl font-bold mb-4 text-black">Login</h2>
          <div className="mb-6">
              <label htmlFor="email" className="block mb-1 text-black">Email:</label>
              <input type="email" id="email" name="email" className="w-full border-2 border-black bg-white rounded px-3 py-2" />
          </div>
          <div className="mb-6">
              <label htmlFor="password" className="block mb-1 text-black">Password:</label>
              <input type="password" id="password" name="password" className="w-full border-2 border-black bg-white rounded px-3 py-2" />
          </div>
          <button type="submit" className="bg-black text-white py-2 px-4 rounded hover:bg-white hover:text-black hover:shadow-lg duration-300 ease-in-out">Login</button>
      </form>
  </div>
  );
}


I'm assuming its because of the styling? maybe?
Black carp
I'm assuming its because of the styling? maybe?

Yes, most likely. In the third line you are interpolating some class, maybe that's the source of the hydration mismatch. Can you remove that and see if it works?
Black carp
Are you using tailwind? You should check the documentation for how to use tailwind with SSR.
Amur catfishOP
Yeah it's tailwind, i dont think its a SSR with tailwind issue though because i originally had this as a client component and was getting the same errors, i figured being on server would maybe stop this error. It just seems so strange that making a page with styles could be so troublesome...