Warning: Text content did not match. Server: 'X' Client: 'Y'

Workarounds

1. 95% success Use useEffect for browser-only values (dates, localStorage, window size)

   const [time, setTime] = useState('');
   useEffect(() => setTime(new Date().toLocaleString()), []);

   Sources: https://react.dev/reference/react/useEffect

2. 85% success Use suppressHydrationWarning only on the specific element with dynamic content

   Use suppressHydrationWarning only on the specific element with dynamic content

   Sources: https://react.dev/reference/react-dom/client/hydrateRoot

3. 88% success Ensure server and client use the same data — pass SSR data via props, not new fetches

   // Serialize SSR data into the HTML for client hydration:
   // Server renders a script tag with: window.__DATA__ = JSON.stringify(data)
   // Client: hydrateRoot(el, <App data={window.__DATA__} />)

   Sources: https://react.dev/reference/react-dom/server