Error while using randomness for inline styling

[manuelro]

There is some weird error warning about issues with server and client sides rendering not being the same. The issue shows up only if I use rgb colors in CSS-in-JS for inline styling.

The error:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) ackground-color:rgb(232, 232, 49);" data
 (server) ackground-color:rgb(49, 232, 140);" data

If I replace the color from rgb to any named-color ('blue', 'red', etc.), the warning disappears.

The code

    let itemStyles = {  backgroundColor: backgroundColor  }
    return <li className="nav-list__item" style={ itemStyles }>...</li>

And I think the differences between the client color and the server color has to do with randomness. My script is generating a random color based on hsl and translated to rgb, this is how this is intended to be. Is there any chance the random number generated on the server is being overridden by the random number generated on the client? If so, is this the intended behaviour? I know isomorphic JS is something hard to deal with. Any advice would be greatly appreciated.

[eezing]

@manuelro The warning is expected behavior. Yes the different random RGB values from server to client are causing the issue. If you're interested, you can learn about universal react here.

[Ehesp]

Try setting the colour outside of the components for the first render, and only generating if it doesn't exist (on the server).

[manuelro]

Thanks for the advice. I'll give it a try.

[timneutkens]

Closing as this is not an issue produced by Next.js, feel free to re-open if needed ❤️