Skip to content

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

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

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
Copy Markdown

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
Copy Markdown

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.

@aidenybai
Copy link
Copy Markdown
Member

Reimplemented in main — thanks for the fix!

@aidenybai aidenybai closed this Apr 17, 2026
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.

2 participants