Nextjs mix SSR and client data in components

[antonbashmakov]

I faced the situation when the same component shows mixed data when randomisation involved, html get jumbled data partially from SSR and partially from client rendering.

Here is the code :

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

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

The result is following.

SSR :

========================== 0.30408232064749563
Client rendering :

========================== 0.6842738761932372
Result HTML :

<a href="0.30408232064749563">0.6842738761932372</a>
So the a tag get old SSR value in href while text value get updated.

[paales]

You can not use randomization like this. You should probably generate a random number in the getStaticProps and send that to the client so the server and the client renders the same data.

If you wish to render something random on the client only, you should use useEffect and set a value on a useState property

Does that make sense?