Question

我遇到的情况是，当涉及随机化时，同一组件显示混合数据，html部分从SSR和部分从客户端渲染中获取混杂数据。

这是代码：

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

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

结果如下。

SSR：

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

客户端渲染：

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

结果HTML：

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

因此，a标签在href中获得了旧的SSR值，而文本值得到了更新。

Answer 1

如果要使SSR和CSR中的数据相同，则应在Math.random()中创建getInitialProps并将其传递给props。

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

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

  return {
    rand
  }
}

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

1 个答案: