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

WorkspaceHeader renders Date.now() directly during the initial render path, so the server-rendered timestamp differs from the client timestamp used during hydration.

Minimal fix

Move the client-only timestamp behind a useEffect-driven mounted state, render a stable SSR placeholder until hydration completes, or apply suppressHydrationWarning to the specific timestamp span if the mismatch is intentional.

Repair skill

skill_5d6ebbda3082a6cd

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 client-only timestamp behind a useEffect-driven mounted state, render a stable SSR placeholder until hydration completes, or apply suppressHydrationWarning to the specific 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.