Serverside rendering in Next.js, class names don't match on server vs client hydration

cssinjs / jss

JSS is an authoring tool for CSS which uses JavaScript as a host language.

https://cssinjs.org

MIT License

7.06k stars 397 forks source link

Serverside rendering in Next.js, class names don't match on server vs client hydration #841

Closed trusktr closed 5 years ago

trusktr commented 5 years ago

I'm having this problem when using SSR in Next.js: https://github.com/zeit/next.js/issues/5106

Any thoughts on how to solve it?

trusktr commented 5 years ago

I guess solving https://github.com/cssinjs/jss/issues/457 would also solve this one.

HenriBeck commented 5 years ago

See: http://cssinjs.org/react-jss?v=v8.6.1#server-side-rendering

Also using jss.createStyleSheet will not work with React server-side rendering as it uses a different generateClassName which results in a different counter and the sheet will also not be added to the sheets registry and there not send with the initial HTML.

trusktr commented 5 years ago

Thanks! Got it working. Yep, had to move all styles to React components. So I put global styles on the root App component; that seems a good place for it.