reactjs - Nextjs 在组件中混合 SSR 和客户端数据

Question

当涉及随机化时，当同一个组件显示混合数据时，我遇到了这种情况，html 部分从 SSR 部分从客户端渲染获取混乱数据。

这是代码：

const Component = (props) => {
    const rand = Math.random();
    console.log('==========================', rand);

    return <a href={rand}>{rand}</a>
}

结果如下。

固态硬盘：

========================== 0.30408232064749563

客户端渲染：

========================== 0.6842738761932372

结果 HTML：

<a href="0.30408232064749563">0.6842738761932372</a>

因此，a标签在href更新文本值的同时获取旧的 SSR 值。

标签： reactjsrandomnext.js

Answer 1

如果要使 SSR 和 CSR 中的数据相同，则应Math.random()在.getInitialPropsprops

const Component = props => {
  console.log(props.rand)
}

Component.getInitialProps = async () => {
  const rand = Math.random();
  console.log(rand);

  return {
    rand
  }
}