FOUC only in production on latest Firefox

[nicholaschiang]

What version of Next.js are you using?

10.0.7

What version of Node.js are you using?

12.8.3

What browser are you using?

Firefox 85.0.1 (64-bit)

What operating system are you using?

Pop_OS! 20.04 (Ubuntu 20.04)

How are you deploying your application?

Vercel

Describe the Bug

I see a FOUC when accessing my production deployment on Firefox:

It seems to disappear when using Chrome or Firefox on mobile.

I also appear to get the same issue for my portfolio website on Firefox:

Expected Behavior

There should be no FOUC.

To Reproduce

1. Visit my production deployment.
2. See FOUC.

Or, to reproduce locally:

1. Clone this repository.
2. Install dependencies (using yarn).
3. Start a development server (using yarn dev:next).
4. Visit http://localhost:3000 and see FOUC.

You'll need some env files for that reproduction to work correctly. Instead, you can just reproduce the same FOUC using my portfolio website (which is a lot smaller than that repo anyways):

1. Clone this repository.
2. Install dependencies (using yarn).
3. Start a development server (using yarn dev).
4. Visit http://localhost:3000 and see FOUC.

[nicholaschiang]

I've also confirmed this behavior with the latest next@canary for tutorbook/tutorbookapp. It still shows a FOUC.

[nicholaschiang]

The FOUC seems to go away when using next@canary for the development server. But it's still there for next build (i.e. in production when deployed on Vercel).

[elinlutz]

This might help: After hours of troubleshooting sudden FOUC in my next.js app (deployed at Vercel with styled-jsx, problems in production mode only) I discovered that I had styled-jsx installed as a separate package in my app. This created some conflict with next.js built-in styled-jsx. Deleting the package fixed it.

[nicholaschiang]

@elinlutz Thanks for the tip! Didn't seem to work though.... still got a FOUC in production while using Firefox. I'm using mostly SCSS modules (styled-jsx only for a couple of icons I think).

[muntasirsyed]

Also having this issue + also using SCSS modules. Is there a trend there or anyone else experiencing this and not using SCSS?

[nikoladev]

@muntasirsyed I'm also using SCSS modules and having the issue. Haven't tried it without SCSS or modules yet

[developit]

not sure if I'm stating the obvious here, but FWIW both of the videos just show a cursor moving around a black screen.

[nicholaschiang]

@developit Yup, sorry. Just updated the original issue comment with GIFs that should show the FOUC properly.

[Dammic]

I have the same issue on the project I'm working on. And that happens also on chrome (I see that only on your portfolio example as well).

We're using styled-components, and nothing I've done is correcting this behaviour (tried many things already). I don't have any conflicting styled-jsx, I'm using 10.0.9 version of nextjs). I've finally opted to just hide the content until the js is loaded, but that's not a good solution for SSR.

[nicholaschiang]

Weird update: The FOUC seems to go away when using a Firefox private browsing window. Perhaps it has something to do with local storage data or service workers or something... 🤷

[nicholaschiang]

I'm guessing that the issue was introduced due to a Next.js change in how scripts are loaded.

See: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468

This issue also appears on Vercel and the Next.js docs when JavaScript is disabled:

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.

[nicholaschiang]

After some investigation, I think there are a couple of bugs at play here:

1. Firefox's devtools inspector updates the layout of the page (so you can inspect stuff) before stylesheets have loaded.
   I'm guessing this is what causes the FOUC when devtools are open (and JavaScript is disabled). Note that this error seems to always occur if the React Developer Tools extension is active. Notice how the "forced layout" console warning doesn't come from any of the page scripts, but from a node.js:354 Mozilla devtools source file (specifically view-source:resource://devtools/server/actors/inspector/node.js):

2. Any other extension that updates the page before stylesheets have loaded will cause a FOUC.
   Similar to how the devtools inspector causes a FOUC, any other Firefox extension that tries to access the page layout before stylesheets have loaded will also cause a FOUC. This is why the FOUC goes away when using a private browsing window without any extensions installed.

3. Next.js doesn't wait for stylesheets to load before executing scripts.
   This causes a FOUC when one of those scripts tries to access the page layout before stylesheets have been loaded. This is the main issue here that should be addressed by Next.js maintainers. Notice how the "forced layout" console warning comes from one of my page scripts that tries to use window.innerWidth and window.innerHeight:

[pcmaffey]

A hack workaround: add a dummy <script>0</script> to your _document.js page, like so:

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <script>0</script>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Here's the 7 year old issues with FF lol https://stackoverflow.com/questions/21147149/flash-of-unstyled-content-fouc-in-firefox-only-is-ff-slow-renderer

[nicholaschiang]

@pcmaffey Thanks! That looks like the workaround a lot of us are using (I also saw that StackOverflow answer). But I'm wondering if it has to do with Next.js changes... because it was working previously (e.g. before 10.x I think) without a FOUC.

[apoorvHearth]

Facing the same issue, but what I have found out is that styles-jsx and material UI styles do get rendered on the server, while SCSS modules are loaded later through JS which causes a FOUC when styling your content with SCSS modules.

[jankaifer]

Just checked with pnpm create next-app 22465 it's still an issue.
Another SO post that might be relevant: https://stackoverflow.com/a/57675785
Disabling JS in the browser fixes the issue so some script might be forcing layout which renders the page in ff.