Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Development server has a flash of unstyled content (FOUC)

See original GitHub issue

Bug report

Describe the bug

A clear and concise description of what the bug is.

When using Next.js, it appears that the CSS isn’t fully hydrated into the <head> when the <div id="__next"> element first becomes visible.

This causes a flash of unstyled content (or FOUC) when running our development server. It seems like it’s fine in production though (which seems strange to me).

To Reproduce

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

Clone this repository by running:

$ git clone https://github.com/tutorbookapp/covid-tutoring

Install our dependencies (more details in our README.md) by running:

$ npm i && lerna bootstrap --hoist

Start a development server by running:

$ npm run dev

Notice the FOUC when first loading the page.

Expected behavior

A clear and concise description of what you expected to happen.

The <div id="__next"> element should only be visible after the necessary above-the-fold stylesheets (i.e. the style sheets that are included in the React components that are visible above-the-fold) are inserted into <head>. The remaining stylesheets can then be loaded with the <div id="__next"> element visible.

Screenshots

If applicable, add screenshots to help explain your problem.

See the FOUC visible on our development server:

fouc

Notice that it’s gone on our production website:

no-fouc

System information

OS: Ubuntu 18.04.2
Browser: Firefox 76.0.1
Version of Next.js: 9.4.0
Version of Node.js: 12.16.1

Issue Analytics

State:
Created 3 years ago
Reactions:22
Comments:34 (5 by maintainers)

Top GitHub Comments

46reactions

florianmatzcommented, Aug 20, 2020

What about production? I’m still experiences the FOUC with StyledComponents + Material UI

13reactions

ElegantSoftcommented, Jan 31, 2021

I happen’s to me with latest version

Top Results From Across the Web

What the FOUC is happening: Flash of Unstyled Content

This situation occurs whenever a Web browser ends up showing your Web page's content without having any style information yet. and the "exactly ......

Fixing Flash of Unstyled Content (FOUC) in your Webpack 4 ...

The fix to the FOUC was to include a Webpack Plugin called Extract Text Loader. This plugin basically extracts all the css that...

What the FOUC is happening: Flash of ... - Estee's Tech Blog

This situation occurs whenever a Web browser ends up showing your Web page's content without having any style information yet. and the "exactly ......

Flash of unstyled content with react and scss - Stack Overflow

After migrating my CSS files to SCSS, I can see FOUC for my layout elements at the first load (After each reloads of...

Solve flash of unstyled content (FOUC) on NexJS and GatsbyJS

As mentioned in the title, the flash of unstyled content may be caused by the use of the styled-component plugin. That makes it...