Next.js Discord

Discord Forum

new Date() is causing Hydration error

Unanswered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
const currentYear = new Date().getFullYear();
<p>@ {currentYear}</p>

I just wrote that simple code, but it caused this error:

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.


Does anyone know how to solve that?

10 Replies

Catla
Next.js initially renders components on the server, and then the client-side JavaScript takes over to make the application interactive. When new Date() is used directly in a component, the server and client might generate different date/time values due to time zone differences or the slight delay between rendering environments. This discrepancy leads to a hydration error, where the client-rendered output doesn't match the server-rendered HTML.
As a solution you can use this.


"use client";

function MyComponent() {
  const year = new Date().getFullYear();

  return (
    <div>
      {year}
    </div>
  );
}

export default MyComponent;
Asian black bear
This is not a solution since client components still get prerendered and can cause a hydration error. Also I suspect your response is LLM-generated. Do note that we do not tolerate this should this be the case.
West African LionOP
From the official docs, I chose 3rd solution https://nextjs.org/docs/messages/react-hydration-error#solution-3-using-suppresshydrationwarning . It works for me, but I don't know if it's good practice or not
@West African Lion From the official docs, I chose 3rd solution https://nextjs.org/docs/messages/react-hydration-error#solution-3-using-suppresshydrationwarning . It works for me, but I don't know if it's good practice or not
Asian black bear
The best practice is to use a stable way of obtaining the time across boundaries such as next-intl's useNow/getNow if you already use it or just delegate the client-side update into an effect.
@West African Lion by the way, what could go wrong if I ignore the error?
awareness481
In this case, users, particurarly those on slow connections, might be see the wrong date until react is loaded on the client. That's not very likely to happen but still there's no reason to send the wrong date.
Especially for dates, it's more likely that the server's time is on a different timezone compared to the user.
Britannia Petite
try to add this <html lang='en' suppressHydrationWarning> in your root layout. I think I fixed similar issue with this