search

vercel / ai-chatbot

A full-featured, hackable Next.js AI chatbot built by Vercel
https://chat.vercel.ai
Other
9.79k stars 2.47k forks source link

fix: hydration error on small device (chat-header) #546

Open mrcodiator opened 1 week ago

mrcodiator commented 1 week ago

Issue & Resolution Note for Vercel AI Chat Repo Issue:#535

The chat app encountered a hydration mismatch error due to the use of the useWindowSize hook. This occurred because server-side rendered content couldn’t access the window dimensions, causing a mismatch when the client-side rendered content based on the actual window width.

Resolution:

To fix this, we added a client-side mounting check using an isMounted state tracker:

Initially rendered a simplified header that matched the SSR output. After the client was mounted, we rendered the full header with width-dependent content. This ensures consistent rendering between server and client, following React’s SSR best practices.

Fixed Component: components/chat-header.tsx

error-vercel-chat
vercel[bot] commented 1 week ago

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

A member of the Team first needs to authorize it.