[NEXT-643] FOUC using CSS-in-JS libraries in appDir through useServerInsertedHTML #44125
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
Binaries:
Node: 16.16.0
npm: 8.11.0
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.0.8-canary.0
eslint-config-next: 13.0.6
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true)
Link to the code that reproduces this issue
https://github.com/mghizzo/next-reproduction-app
To Reproduce
Start the bug reproduction project and just navigate to http://localhost:3000 to see FOUC, you can also disable javascript on the page to ensure that styles which should be injected are not there.
Describe the Bug
Using useServerInsertedHTML inside a component won't inject result in the head if there's no <head> tag.
You can temporarily fix this issue by using head tag somewhere (head file if you have one or just put a <head /> in the Root Layout.
I also found a commit which was meant for a fix but it was then reverted.
Expected Behavior
It is expected that the result of useServerInsertedHTML gets injected inside the head.
Which browser are you using? (if relevant)
Google Chrome 108.0.5359.124 (ARM64)
How are you deploying your application? (if relevant)
No response