Emotion v11 vanilla - nextjs SSR

[MMT-LD]

Hey.

i have setup a nextjs site using vanilla emotion and custom cache via createEmotion. If i were to use in nextjs all works as expected css works etc plus SSR - cool (custom document and _app).

However, in a previous world i think before emotion v10 the ids would need to be hydrated and set on the window using hydrate function client side (find window ids and map over them to remove style tags from document head) - @emotion/react (core) solved this by wrapping in cache provider - something like that. However, because i'm now using vanilla emotion i think this step does not automatically happen? am i correct? so i would need to set ids on window, find them and execute hydrate. The reason for this is because in devtools in chrome i would see two sets of styles in prod mode - style tag <style> (name in dev tools) and SSR style tag (index): 1.

if i re-add the ids inside nextjs constructor as previous before emotion v10 and then hydrate on client it seems to solve the problem - is this expected or can i do something else? - just to re-iterate i'm using emotion vanilla not emotion/react - well i use cache provider from @emotion/react.

Thanks in advance

[MMT-LD]

i have created an example in nextjs - i had issues assigning to window unless i used constructor in _document.js. It was not properly loaded in window before hydrate was run. However, i fixed that by adding an additional data attribute to the style tag and looking for that on the client (load order as style tag is in the head of the document).

vercel/next.js#20228

[Andarist]

However, because i'm now using vanilla emotion i think this step does not automatically happen? am i correct?

I believe that the hydration still happens automatically with vanilla emotion - as long as the SSRed style elements conform to the pattern we can handle.

---

If something doesn't work as you have expected it to then really the best thing you could do to get a comprehensive answer would be sharing a runnable repro case of the problem which I could take a look at.

[MMT-LD]

Thanks for getting back. I wander if you could take a look at that pull request for a vanilla emotion version to go into NextJS's examples. It would be most appreciated. It seems to work for me. However i'm a little unclear if i have missed something obvious?

If not - then when i get some time i could put together some repo of the issues with the double style tag using the approach from the docs (again i could have missed something - which is probably the case 😉 )