Next js смешивает SSR и данные клиента в компонентах - PullRequest
Новая
       5

Next js смешивает SSR и данные клиента в компонентах

0 голосов
/ 28 мая 2020

Я столкнулся с ситуацией, когда один и тот же компонент показывает смешанные данные при включенной рандомизации, 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 получает старое значение SSR в href, а текстовое значение обновляется.

1 Ответ

0 голосов
/ 29 мая 2020

Если вы хотите сделать данные идентичными в 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
  }
}
...