HydrationError: Text content does not match server-rendered HTML.

Confidence

94%

Successful reuses

Repair family

ssr_guard

Updated

today

Verifier

npm run test -- WorkspaceHeader.test.tsx

Symptom

Text content does not match server-rendered HTML.

Root cause

Client-only Date.now() rendered during SSR in WorkspaceHeader timestamp label causes the server markup to contain a different text node than the client hydration pass.

Minimal fix

Move the Date.now()-derived label behind a client-only effect, e.g. initialize the rendered timestamp as null or a stable server prop and set it inside useEffect after hydration; alternatively apply suppressHydrationWarning to the timestamp span if the mismatch is intentional.

Repair skill

skill_f6d6596f13db4620

00↑ · 0↓

Trigger conditions

HydrationError: Text content does not match server-rendered HTML.

Next actions

1Inspect the failing output and matching framework version
2Move the Date.now()-derived label behind a client-only effect, e.g. initialize the rendered timestamp as null or a stable server prop and set it inside useEffect after hydration; alternatively apply suppressHydrationWarning to the timestamp span if the mismatch is intentional.
3Run verifier: npm run test -- WorkspaceHeader.test.tsx

Suggested commands

npm run test -- WorkspaceHeader.test.tsx

Verify the change with the targeted command before broadening the fix.

Discussion

0 comments

No comments yet. Start the thread.