Next.js: Development server has a flash of unstyled content (FOUC)

Created on 18 May 2020 · 20Comments · Source: vercel/next.js

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

bug needs investigation

Source

nicholaschiang

👍16

Most helpful comment

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

florianmatz on 20 Aug 2020

👍29

All 20 comments

I am also facing this problem when I use css modules but when I use styled-jsx then It works fine.

avijitelu on 18 May 2020

I notice a similar issue that global css in _app.js doesn't seem to be loaded with javascript off while it's in dev mode. It makes SSR harder to test since there could be missing styles.

robgraeber on 21 May 2020

👍4

@robgraeber I have the exact issue you do. The CSS is being compiled into _app.js instead of a separate css file.

derskeal on 22 May 2020

👍1

Same issue here.
I've created a minimum example reproducing this issue: https://github.com/dnaranjo89/next-css-ssr

dnaranjo89 on 22 May 2020

Also sometimes I'll edit some global css in inspector and any change causes the whole page's css to be wrecked somehow. Has anyone experienced that?

robgraeber on 22 May 2020

@derskeal a workaround is to use this sass plugin and import your stylesheets via sass in your Layout component: https://github.com/giuseppeg/styled-jsx-plugin-sass

robgraeber on 24 May 2020

@Timer I could reproduce this issue in this repo https://github.com/yanv1991/demo-react-dom, this is not loading the styles using built in sass modules with a dynamic loaded component for ssr in prod mode

yanv1991 on 2 Jun 2020

👍2

This project cannot be ran:

error - Error [FirebaseError]: projectId must be a string in FirebaseApp.options
    at new FirestoreError (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:1223:28)
    at Function.Firestore.databaseIdFromApp (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:21018:19)
    at new Firestore (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:20850:42)
    at /Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:22871:66
    at Component.instanceFactory (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:22410:16)
    at Provider.getOrInitializeService (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/component/dist/index.cjs.js:219:39)
    at Provider.getImmediate (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/component/dist/index.cjs.js:120:33)
    at FirebaseAppImpl._getService (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:228:49)
    at FirebaseAppImpl.firebaseAppImpl.<computed> [as firestore] (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:440:39)
    at Object.serviceNamespace [as firestore] (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:420:45)
    at eval (webpack-internal:///./src/firebase/db.tsx:19:124)
    at Module../src/firebase/db.tsx (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:128:1)
    at __webpack_require__ (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:23:31)
    at eval (webpack-internal:///./src/firebase/user.tsx:12:61)
    at Module../src/firebase/user.tsx (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:152:1)
    at __webpack_require__ (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:23:31) {
  code: 'invalid-argument',
  toString: [Function]
}

Timer on 22 Jun 2020

This should be fixed in next@^9.4.5-canary.15! Please upgrade and let us know.

Timer on 22 Jun 2020

🎉6 👍6 ❤1

Thanks @Timer! 🎉 I tested and the fix works for me.

showell215 on 22 Jun 2020

I was experiencing this in both dev mode and production mode in a custom server (incrementally converting pages on enterprise site). ^9.4.5-canary.15 fixed it for me!

jimbuck on 30 Jun 2020

Hi guys. Checked the problem with the canary release, it fixes the issue in dev mode but in production it still remains. Does somebody experiences the same issue?

In the production build there is missing the <style data-next-hide-fouc="true">body{display:none}</style>.

casperle on 6 Jul 2020

👍2

Hi guys. Checked the problem with the canary release, it fixes the issue in dev mode but in production it still remains. Does somebody experiences the same issue?

In the production build there is missing the <style data-next-hide-fouc="true">body{display:none}</style>.

Same here, is this a different issue when it happens in prod or related, does anyone know?

ozthekoder on 17 Jul 2020

Same here, is this a different issue when it happens in prod or related, does anyone know?

For me this issue was only occurring in dev mode, not production mode. So given that, I'd assume the prod issue may have a different cause.

showell215 on 17 Jul 2020

Hi guys. Checked the problem with the canary release, it fixes the issue in dev mode but in production it still remains. Does somebody experiences the same issue?

In the production build there is missing the <style data-next-hide-fouc="true">body{display:none}</style>.

Was anyone able to fix this in production? Canary release fixed our dev build, but production is still broken.

BlakeBrown on 18 Jul 2020

👍4

so is canary latest version of next then?

jimmynames on 30 Jul 2020

Yes @jimmynames, canary is the WIP latest version (the term originated from miners using canary birds to test for toxic fumes... The canary version of Next.js could be sketch).

nicholaschiang on 31 Jul 2020

This fix is on the stable release of Next.js 9.5.0 and 9.5.1, or newer (applies to development server only)!

Timer on 31 Jul 2020

👍2

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

florianmatz on 20 Aug 2020

👍29

Did anybody find any solution for this?