search

cssinjs / jss

JSS is an authoring tool for CSS which uses JavaScript as a host language.
https://cssinjs.org
MIT License
7.07k stars 399 forks source link

react 16 SSR issues #731

Closed mike-robertson closed 6 years ago

mike-robertson commented 6 years ago

I believe there may be some kind of incompatibility with the recommended SSR patterns for jss with react 16. I'm referring to the rehydration part of this documentation.

I think the issue is 2 fold, and I am not entirely ruling out a 1d10t error on my part. 1 part is that when we render our app on the server side, the jss generated class names are different than the client side generated class names. The primary difference in the naming scheme seems to be that on the server side, the class name will look like this Component-className-0-1-9, and on the client side, the class name will look like ActualComponentName-className-0-1-9. I'm not sure how jss is pulling in the component name, but maybe something there is messing with the SSR (or it could be something we are doing wrong on our side).

The other part of this issue is due to how react 16 hydration works. Since we get this differing class name, react 16 hydrates what is rendered server side and won't update nodes with any differences (including the difference in class names). So JSS is creating the styles and injecting it into the DOM, but the class name isn't being updated once hydration occurs.

We aren't seeing any issues if we leave in the server side styles right now (due to the class name difference), but I imagine in the future it could become an issue.

So I don't know enough about the internal workings to tell whether this error is occurring within the library or in our code, so feel free to close this if it seems obvious this is an error on our part. FWIW, I did try to follow the docs as closely as I could. Thanks again for the great library!

kof commented 6 years ago

the jss generated class names are different than the client side

something is wrong with your setup, I guess react-jss is not getting the same component display names https://github.com/cssinjs/react-jss/blob/master/src/getDisplayName.js

Please create a new issue on react-jss, since this is related to react-jss and please provide something that reproduces or explains what needs to be done

mike-robertson commented 6 years ago

Ok, I think it may be related to this issue you created: https://github.com/cssinjs/jss/issues/677

Thanks for the quick reply!

kof commented 6 years ago

In your example numbers are identical, but component names are not. Means one of those runtimes doesn't get proper component names where I pointed you to.

mike-robertson commented 6 years ago

Yea that would make sense.