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

[elder perch]

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

[plain night]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[jaunty grotto]

Can you post a snippet of the component that is giving you the error?

[elder perch]

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?

[jaunty grotto]

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?

[elder perch]

{besley.classname} ?

ive removed that and still get the error.

[jaunty grotto]

Are you using tailwind? You should check the documentation for how to use tailwind with SSR.