Server-side rendering with React triggers a re-render on the client

[charliermarsh]

This is due to the random suffix hack. For example, perhaps my first class on the server gets named "c0-abcd". Then, the markup produced by React looks like (ignoring data-reactid):

<div class="c0-abcd" data-react-checksum="1234">foo</div>

On the client, RCSS might produce a different random suffix for the same class, so it gets represented as "c0-efgh". Then, the markup produced by React would look like:

<div class="c0-efgh">foo</div>

This leads to a different checksum, triggering a re-render.

I know this has been said been noted elsewhere by @chenglou, but we need the CSS classname to be purely a function of the style object.

[Raynos]

👍

[nrw]

👍