Description
While running the application locally in development mode, a React Hydration Error is repeatedly thrown in the console and error overlay due to the <FeedTicker> component.
Error Trace:
Error: Text content does not match server-rendered HTML. See more info here: https://nextjs.org/docs/messages/react-hydration-error
Server: "6s ago" Client: "just now"
Cause
The <FeedTicker> is rendering relative timestamps (e.g., "just now", "6s ago") directly during Server-Side Rendering (SSR). By the time the client hydrates, the relative time string changes, causing a mismatch between the server HTML and client DOM.
Expected Behavior
The relative timestamp should safely bypass SSR hydration checks. We can resolve this by either:
- Using the
suppressHydrationWarning prop on the span rendering the time.
- Using a custom
useMounted hook or a useEffect to ensure the relative time is only rendered after the component has fully mounted on the client.
I would like to be assigned on this issue to solve it.
Labels
bug, frontend, next.js
Description
While running the application locally in development mode, a React Hydration Error is repeatedly thrown in the console and error overlay due to the
<FeedTicker>component.Error Trace:
Error: Text content does not match server-rendered HTML. See more info here: https://nextjs.org/docs/messages/react-hydration-errorServer: "6s ago" Client: "just now"Cause
The
<FeedTicker>is rendering relative timestamps (e.g., "just now", "6s ago") directly during Server-Side Rendering (SSR). By the time the client hydrates, the relative time string changes, causing a mismatch between the server HTML and client DOM.Expected Behavior
The relative timestamp should safely bypass SSR hydration checks. We can resolve this by either:
suppressHydrationWarningprop on the span rendering the time.useMountedhook or auseEffectto ensure the relative time is only rendered after the component has fully mounted on the client.I would like to be assigned on this issue to solve it.
Labels
bug,frontend,next.js