Skip to content

fix(website): prevent hydration mismatch in terminal demo#28

Open
SultokTheF wants to merge 1 commit intomillionco:mainfrom
SultokTheF:fix/website-hydration-mismatch
Open

fix(website): prevent hydration mismatch in terminal demo#28
SultokTheF wants to merge 1 commit intomillionco:mainfrom
SultokTheF:fix/website-hydration-mismatch

Conversation

@SultokTheF
Copy link

Summary

Fix hydration mismatch on the website terminal demo.

The issue was caused by reading localStorage during initial render, which could produce different first render output between SSR and client (empty command on server vs completed command on client).

What changed

  • Terminal now always starts from INITIAL_STATE on first render.
  • Moved persisted state check (didAnimationComplete) into useEffect (client-only after mount).
  • If animation was already completed, state is set to COMPLETED_STATE after mount.

Why this fixes it

SSR and first client render are now deterministic and identical, so React hydration no longer sees text/content mismatch.

Files

  • packages/website/src/components/terminal.tsx

Validation

  • Reproduced mismatch before fix.
  • Verified render flow after fix: no server/client initial state divergence.

Additional changes

  • Ignore package-lock.json in repo/website gitignore files.

@vercel
Copy link

vercel bot commented Feb 18, 2026

@SultokTheF is attempting to deploy a commit to the Million Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant