FOUC with Next.js app router

[pmillspaugh]

Do you want to request a feature or report a bug?

Report a potential bug. Thanks in advance!

What is the current behavior?

• FOUC on page load
• CSS doesn't load at all with JS disabled

Screen.Recording.2024-07-22.at.3.10.14.PM.mov

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

Here's a repro I created with npx create-next-app@latest: https://github.com/pmillspaugh/styled-jsx-fouc-test

There's no FOUC with CSS modules, but the simple styled-jsx example I added to app/page.tsx produces FOUC.

What is the expected behavior?

I expect the CSS to be included in SSR, produce no FOUC, and still load with JS disabled. It sounds like Next.js v12 and up manage SSR for you.

Environment (include versions)

• Version of styled-jsx (or next.js if it's being used): Next.js v14.2.5 and styled-jsx v5.1.1 (as dep of next)
• Browser: reproduced on Chrome, Safari, Firefox
• OS: MacOS

Did this work in previous versions?

From other issues I've looked through, it sounds like a mixed bag. Some others reported FOUC, e.g. #681