Next.js：如何在构造函数中设置随机ID并解决Hydration错误

这个错误的核心原因是：Next.js的SSR/SSG模式下，服务端会先渲染一次组件生成HTML，客户端hydration时会再渲染一次。构造函数在服务端和客户端都会执行，两次Math.random()生成的随机数不一致，导致服务端输出的HTML和客户端渲染的内容不匹配，触发Hydration错误。以下是几种可行的解决方案：

1. 类组件：在componentDidMount中生成随机ID #

componentDidMount仅在客户端组件挂载后执行，不会影响服务端渲染的内容。可以在构造函数中先设置一个临时ID，客户端挂载后再替换为随机值：

class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: 'temp-card-id' // 服务端渲染用临时占位ID
    };
  }

  componentDidMount() {
    // 仅在客户端生成随机ID并更新状态
    this.setState({
      id: `card-${Math.floor(Math.random() * 100000)}`
    });
  }

  render() {
    return (
      <div id={this.state.id}>
        {/* 卡片内容 */}
      </div>
    );
  }
}

2. 函数组件：使用useEffect生成随机ID（补充方案） #

如果后续改用函数组件，useEffect的执行时机和componentDidMount一致，仅在客户端触发：

import { useState, useEffect } from 'react';

function Card() {
  const [cardId, setCardId] = useState('temp-card-id');

  useEffect(() => {
    setCardId(`card-${Math.floor(Math.random() * 100000)}`);
  }, []);

  return (
    <div id={cardId}>
      {/* 卡片内容 */}
    </div>
  );
}

3. 服务端生成ID并通过Props传递 #

如果需要服务端和客户端的ID完全一致，可以在服务端数据获取阶段生成随机ID，再作为Props传递给组件：

// 页面组件中定义服务端数据获取逻辑
export async function getServerSideProps() {
  const cardId = `card-${Math.floor(Math.random() * 100000)}`;
  return {
    props: { cardId }
  };
}

// Card组件直接使用传入的ID
class Card extends React.Component {
  render() {
    return (
      <div id={this.props.cardId}>
        {/* 卡片内容 */}
      </div>
    );
  }
}

内容的提问来源于stack exchange，提问作者user19666029