This repo is intended to demostrate a hydration issue present when using Emotion with NextJS server components + a Suspense boundary.
When referring to "normal" in the text below, I mean styling via the native style tag, not using Emotion.
- Run
npm run build && npm run start - Open the emotion + suspense route. Open the console and notice error message
- Open the normal styling + suspense route. Open the console and notice NO error message present there
On top of this, if we remove the suspense boundary, all the errors dissapear. So it's only the combination of emotion + suspense.
- Open the emotion route. Open the console and notice NO error message
- Open the normal styling route. Open the console and notice NO error message
I noticed that if I wrap the ThemeProvider inside an emotion CacheProvider it solves the issue (see layout.tsx). BUT, that has some additional side-effects, and when trying the same method in other apps with actual components and logic, it produces FOUTs...