Next.js: FOUC using new Next.js 10 and React 17

[nicholaschiang]

Bug report

Describe the bug

Before Next.js 10, my portfolio website had no flashes of unstyled content on both the development server and after being deployed to Vercel. After upgrading to Next.js 10 and React 17, however, I seem to have lots:

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to https://nicholaschiang.com
2. See FOUC

Or, if you want to reproduce locally:

1. Clone this repository
2. Follow these instructions to install deps, etc
3. Run yarn dev or yarn build && yarn start
4. Open up http://localhost:3000
5. See FOUC

Expected behavior

There should be no FOUC when using React 17 and Next.js 10.

System information

• OS: PopOS 20.10
• Browser (if applies) Firefox
• Version of Next.js: 10.0.0
• Version of Node.js: 12.18.3

[felixmosh]

Probably related to #17086

[nicholaschiang]

@felixmosh I think these are two different issues because styling works fine with client-side navigation, but is messed up when users first visit the page. I'm going to revert back to Next.js 9 to get rid of that FOUC.

[drazik]

Same problem here. I absolutely can't find why I have a FOUC, but here is what I can see: dev builds are OK, but prod builds produce a FOUC on first visit (or refresh with cache cleaned). I used this "fix" but it doesn't seem like a long-term fix.

But even if I use next@9 I have the issue.

[serhii-baraniuk]

I use styled-jsx on my project and have the same problem. Dev builds works well, but if I disable JavaScript I see that the styles are not loaded.

[nicholaschiang]

@serhii-baraniuk I can confirm that this is a styled-jsx issue because I recently ported over some of that website code into my TB project and experienced the same issue. So, I switched over to using SCSS modules and it worked fine.