Debug server rendered styled-jsx vs client-side rendered jsx

[haf]

Summary: our "hero" component has two states; initially it gets fed with nulls and undefineds while the data/text is loading and then as the data has loaded, it renders the images and text in the data. We are using apollo-client with SSR, so it does a double-pass over the React tree to 1) trigger the download of the headless CMS data and 2) render the React tree with hydrated data.

However, on one of our pages (only one of them) we have this error on load:

index.js:1 Warning: Prop className did not match. Server: "jsx-349921261" Client: "jsx-4280868776"

All other pages work, but the data is obviously different between them. How do I debug what causes the different jsx class to be applied? I get good output from the server (as far as I can ascertain) but this causes a re-load of all the headless CMS data on the client, probably because the React tree can't properly re-hydrate.

The code in question looks like this rendered:

And this in source form (Appendix A).

React messes up box tracking

This wouldn't be a super-huge issue, hadn't it affected the layout in a very strange way; when the above warning happens, react messes up and loses track of the content in two boxes, so that it looks like this:

When it really should look like:

(which it does when client-side navigating to it)

How do I debug/resolve this?

Appendix A - Source code

Appendix B

Cross posted here https://stackoverflow.com/questions/60932324/debug-server-rendered-styled-jsx-vs-client-side-rendered-jsx