react runtime_error ai_generated true

Hydration failed because the server rendered HTML didn't match the client. Specifically, attribute 'data-server-value' mismatch.

ID: react/hydration-mismatch-attribute

Also available as: JSON · Markdown · 中文
91%Fix Rate
86%Confidence
1Evidence
2023-07-12First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React 18.2.0 active — — —
Next.js 13.4.0 active — — —
Remix 2.0.0 active — — —

Root Cause

Server-side rendering produces different attribute values than the client's initial render, often due to dynamic content (e.g., timestamps, random IDs, user-specific data) that differs between server and client environments.

generic

中文

服务器端渲染产生的属性值与客户端的初始渲染不同，通常是由于动态内容（例如时间戳、随机 ID、用户特定数据）在服务器和客户端环境之间存在差异。

Official Documentation

https://react.dev/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html

Workarounds

  1. 95% success Ensure the attribute value is deterministic between server and client. For dynamic values, use useEffect to set them after hydration, or use a client-only component wrapper. 
    Ensure the attribute value is deterministic between server and client. For dynamic values, use useEffect to set them after hydration, or use a client-only component wrapper.
  2. 85% success Use the 'suppressHydrationWarning' attribute only as a last resort for intentional mismatches (e.g., timestamps), but prefer making the value consistent. 
    Use the 'suppressHydrationWarning' attribute only as a last resort for intentional mismatches (e.g., timestamps), but prefer making the value consistent.

中文步骤

  1. Ensure the attribute value is deterministic between server and client. For dynamic values, use useEffect to set them after hydration, or use a client-only component wrapper.
  2. Use the 'suppressHydrationWarning' attribute only as a last resort for intentional mismatches (e.g., timestamps), but prefer making the value consistent.

Dead Ends

Common approaches that don't work:

  1. 70% fail

    Suppressing the warning doesn't resolve the mismatch; the client will still re-render the element, potentially causing layout shifts or inconsistent state.

  2. 60% fail

    If the attribute should be dynamic (e.g., based on user preferences), hardcoding removes that functionality.