Pages render without styles for a brief second #15642

Lillebo · 2020-07-29T19:07:26Z

Bug report

Describe the bug

Pages render without any styles for a brief second before the CSS is loaded:

This only happens in production. In development everything is fine and pages render perfectly styled immediately.

To Reproduce

I try to load some global styles in _app.tsx like:

// _app.tsx
import '../assets/styles/global.scss';

const MyApp = () => { ... }

export default MyApp;

// global.scss
@mixin system-font() {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  @include system-font();
  background: white;
  color: $text-color;
  line-height:1.5;
}

Then all my pages and components follow this pattern:

// my-page.tsx
import './my-page.scss'

const MyPage = () => { ... }

export default MyPage;

// my-component.tsx
import './my-component.scss'

const MyComponent = () => { ... }

export default MyComponent;

Expected behavior

I expect pages to render with styles without such flickering.

System information

OS: macOS Catalina 10.15.5
Browser: Firefox 78.0.2
Version of Next.js: 9.4.4
Version of Node.js: 12.18.1

The text was updated successfully, but these errors were encountered:

Timer · 2020-07-29T19:24:29Z

This should've been fixed in Next.js 9.5, please upgrade and let us know! Otherwise, please provide a complete reproduction.

Lillebo · 2020-07-29T20:13:24Z

Just upgraded to 9.5. Sorry to say it is still a problem 😕

Lillebo · 2020-07-29T20:45:28Z

~~Hm, now it seems to have been fixed after all. Might have just been my cache. Thanks 🙂~~

Lillebo · 2020-07-29T20:48:14Z

However, if I leave my devtools open (where I have disabled cache) - the problem persists. So it might still be a thing on the very first page load?

eeston · 2020-09-29T19:16:22Z

I'm having the same issue as @Lillebo. Switching the browser cache off in the devtools causes a flicker every refresh locally (with a prod build) and in production.

@Lillebo did you get any further with this?

Lillebo · 2020-09-29T19:23:29Z

@johneas10 Afraid not, still having this issue. Currently running 9.5.3

eeston · 2020-09-29T19:29:48Z

Thanks for reopening the issue. Shame you've not come across a solution yet.

I'm using styled-components and came across this issue which seems like it might be similar, although I've tried ignoring fonts all together and the screen still flickers.

eeston · 2020-09-30T09:25:23Z

@Lillebo I've fixed the issue by following this example with a custom _document.js. I hope it helps!

Lillebo · 2020-09-30T10:01:22Z

That solution requires the use of styled-components though, right? I'm not using that - and I really hope that won't be a requirement for using NextJs 😕

eeston · 2020-10-01T08:50:07Z

No not at all. I happen to be using styled-components and this was the solution that prevented my screen from flickering.

Lillebo · 2020-10-01T10:41:31Z

But the example you're referring to seem to depend entirely on ServerStyleSheet from styled-components?

eeston · 2020-10-01T12:57:12Z

Yeah sorry I posted think link as I thought it might be of some help to you, and maybe others. My setup seems to be a little different to yours though.

Lillebo · 2020-10-01T18:36:51Z

Yup, no worries 🙂

armageddon808 · 2020-10-17T04:41:38Z

@Lillebo

Can you try adding a <script>0</script> tag right after the opening <body>?

This stackoverflow answer seemed to help me. I was getting quite a bit of FOUC in Firefox and it seems to be gone.

You'll need to add a custom _document.

ghost · 2020-10-21T11:23:33Z

I am having this issue on 9.5.5 as well and I have included the code for _document.js as described here: https://github.com/vercel/next.js/blob/master/examples/with-styled-components/pages/_document.js

Might it have something to do with a custom render function in the _document.js where we add the GTM tags and therefor it doesn't load it properly in the head?

The SSR works fine as when I run the website without JS, I can see the website without the FOUC problem. But when I enable it, I get everything unstyled first and then rendered properly like the example of OP

ghost · 2020-11-02T11:14:58Z

Just want to update this thread that with 10.0.0 this problem still exists

MontoyaAndres · 2020-11-12T15:40:20Z

sam problem with 10 version, any updates :/?

Timer · 2020-11-12T15:43:33Z

Closing as there was no full reproduction provided.

TylerJNewman · 2020-12-07T18:08:49Z

Can you try adding a <script>0</script> tag right after the opening <body>?

This worked for me, thank you, not sure why...

LennyDiggelen · 2020-12-07T18:11:19Z

Can you try adding a <script>0</script> tag right after the opening <body>?

This worked for me, thank you, not sure why...

All browsers? I read some things about FF only about that solution

TylerJNewman · 2020-12-07T18:14:56Z

Can you try adding a <script>0</script> tag right after the opening <body>?

This worked for me, thank you, not sure why...

All browsers? I read some things about FF only about that solution

Yes, on chrome. I was focused on chrome first. I am using ant design and the FOUC was breaking my CSS. It would show ellipses instead of a menu.

kb1995 · 2020-12-23T21:33:46Z

@Lillebo

Can you try adding a <script>0</script> tag right after the opening <body>?

Thanks! This worked perfectly for me, but I have no idea why. Can somebody explain?

scottmay2020 · 2021-01-04T17:08:36Z

@Lillebo
Can you try adding a <script>0</script> tag right after the opening <body>?

Thanks! This worked perfectly for me, but I have no idea why. Can somebody explain?

I believe this is the issue from Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468

faizullah11 · 2021-01-14T14:00:04Z

I am also facing this issue my Next.js version is 9.5.5 and react version is 16.8.6.

nagman · 2021-01-16T16:42:34Z

The FOUC still happens on next.js 10, on chrome also.
The <script>0</script> hack worked for me, but that's really strange.

nikoladev · 2021-02-12T13:38:55Z

I've also come across this bug. Here's a very minimal reproduction.

@Timer Will this reproduction be enough?

The following results are copied from the README of the reproduction repo:

Tested on macOS.

On Firefox I get this on every reload.

On Safari I get this on every reload.

On Chrome I only get it on the first load. If I try to reload it doesn't happen anymore.

I have to open up a new tab for it to occur again.

Tested on iOS

On Safari on mobile it's just like Chrome on macOS: It only happens on the first load.

I have to open up a new tab for it to occur again.

Tested on Android

On Chrome on mobile it's just like Chrome on macOS: It only happens on the first load.

I have to open up a new tab for it to occur again.

On Firefox on mobile I get this on every reload.

Aktenor15 · 2021-03-09T10:46:10Z

Same here with next 10.0.8 and Chrome 88 on macOS 11.2

Step to reproduce :
npx create-next-app test
cd test
npm run build
npm run start

Go to http://localhost:3000 from chrome and reload page

next-fouc.mov

osequi · 2021-03-30T15:51:29Z

Hmmm ... the problem still exists. I've added comments to 3 other closed issues taming the same problem.

This is very uncomfortable. Not just in this special case but in other cases too. There is an issue, linking to another similar issue, linking to another similar issue, ... so on. All of them closed.

So far Nextjs is the worst experience among all frameworks I've been using in the last decade.

Not expecting any fixes, I'm just expressing loud my frustration.

muntasirsyed · 2021-03-30T16:27:26Z

Agree somewhat with @osequi 's sentiment.

This issue has been reported multiple times by multiple different people. Every time the issue is closed with a version release referenced, yet the issue remains for all of those who originally reported the issue.

It would be better to, upon releasing any potential fix, checking with the original bug reporter to see if their issue has actually fixed or not before closing these issues down prematurely.

lima-eduardo · 2021-04-27T00:04:38Z

I'm having this issue too and it's not only the styles, I have some hidden element to be show after some JS condition and they render before get hide.

It was happening with my root page and so I thought to test add some "land page", first using nextjs/link and then a normal a tag. Clicking at the the page loads perfectly, due to the preload optimization. (but using F5 happens again). The test with a tag the issue persists.

Since it only happen on production my guess is that a workaround would be disabling the "Automatic Static Optimization" but it is not possible to disable, is it?

Edit: So the workaround is changing your page/component return as:

return typeof window === 'undefined' ? null : <what_it_used_to_be>

to prevent the Automatic Static Optimization.

VertikaJain · 2021-06-03T08:07:19Z

It's June 2021 and I am waiting for an official fix for this issue.
My nextjs deployed app is the perfect example of FOUC.
Using versions - next 10 and react 17.
Browser - chrome.
FOUC issue found in both development and production mode.

timneutkens · 2021-06-03T13:05:56Z

It's June 2021 and I am waiting for an official fix for this issue.
My nextjs deployed app is the perfect example of FOUC.
Using versions - next 10 and react 17.
Browser - chrome.
FOUC issue found in both development and production mode.

Did you set up https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js#L53-L61? Because the initial render does not have FOUC from anything injected by Next.js, you're using a material-ui icon that is causing everything to shift around as the styles are not available in the first render. For example the header styles are available immediately.

VertikaJain · 2021-06-04T12:01:46Z

Did you set up https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js#L53-L61? Because the initial render does not have FOUC from anything injected by Next.js, you're using a material-ui icon that is causing everything to shift around as the styles are not available in the first render. For example the header styles are available immediately.

Thanks @timneutkens
This resolved my issue, but the heading of the page still takes a second for the CSS to get applied. I have updated the site here
Also, there is a new issue after this that my 404.js is not working now, although it is being called, but the function exported is not being executed (was working earlier).
Try something like wronglink
If I create any other page like hello.js, then it's function is also not being executed, although the page is called. (checked using console.log() )

jwandekoken · 2021-07-10T15:52:46Z

I am also having this issue. Iam using next v. 10.2.3 with styled components, using the config described here:
https://github.com/vercel/next.js/tree/master/examples/with-styled-components

The <script>0</script> hack at first sight worked, but when i deployed to vercel, the issue is still happening.

ansonlowzf · 2021-07-16T02:10:43Z

This FOUC issue persisted, <script>0</script> not working on Next11. Anyone has the solution yet?

https://github.com/ansonlowzf/sinno-nextmui5/blob/main/pages/_document.js

raleighslack · 2021-08-03T03:41:19Z

Issue is still up, Next.js version v11.0.1, tried <script>0</script> and the _document.js solution mentioned here none have worked thus far.
Any help would be greatly appreciated.

sidwebworks · 2021-08-25T16:33:39Z

Same issue Next.js version v11.0.1, none of the issues worked. I am using Tailwindcss

artus9033 · 2021-08-27T14:44:22Z

Same issue with Next.js v11.0.1, Material-UI with SSR

gburgi · 2021-09-10T15:49:46Z

Same Here!!!

tamal-sen · 2021-09-26T07:09:16Z

I'm still facing the same issue with NextJs v11.0.1 and React v17.0.2

CameronCT · 2021-10-21T22:39:59Z

Also having the same issue, but using <script>0</script> worked for me. Why did it work? Not a clue!

Jerome1337 · 2021-11-02T10:39:57Z

Still have same problem here, NextJS 11.1.2 React 17.0.2 and Mui 5.

<script>0</script> didn't worked and Emotion/JSS cache either.

This render problem only occurs after production build.

artus9033 · 2021-11-02T15:11:12Z

Still have same problem here, NextJS 11.1.2 React 17.0.2 and Mui 5.

<script>0</script> didn't worked and Emotion/JSS cache either.

This render problem only occurs after production build.

Indeed, it seems like the <script> solution does not help at all, though I was able to resolve the issue differently. I'm using Next@12 along with material-ui and emotion (since it is the new-default styling engine for material-ui), as it turned out, I was improperly using SSR stylesheets, by rendering them in a <CacheProvider> in enhanceComponent in _document.ts.
After having moved this code to _app.ts, so that the App component receives the SSR-prepared stylesheets as a property (passed in enhanceApp in _document.ts), and in turn renders the <CacheProvider>, the problem was resolved. It seems like this was a dumb mistake which caused rendering the Emotion cache provider in _document.ts (server side) and again re-rendering the cache provider (by placing a second one at a lower component tree level) with a different cache instance in _app.ts (during the first client-side render) caused a re-render of the app, thus making the content flash during first render. After looking at it again, the former setup does not make sense at all, although I didn't notice it earlier, so I'm posting this in case that's the way you have it set up as well.

Jerome1337 · 2021-11-02T15:26:47Z

@artus9033 Yes I have the exact same setup, I followed Mui5 example with the enhanceComponent thing. It could be the same problem.
Do you have an example of your _app and _document to show me ?

jonatantibarovsky · 2022-01-03T15:31:37Z

Any solutions? Jan 2022

balazsorban44 · 2022-01-04T00:20:18Z

Please open a separate bug report with your reproduction.

Timer closed this as completed Jul 29, 2020

Timer reopened this Jul 29, 2020

Timer added the please add a complete reproduction Please add a complete reproduction. label Jul 29, 2020

Lillebo closed this as completed Jul 29, 2020

Lillebo reopened this Sep 29, 2020

booDoo1990 mentioned this issue Nov 2, 2020

Just upgraded to 9.5. Sorry to say it is still a problem 😕 GitHawkApp/GitHawk#2931

Closed

Timer closed this as completed Nov 12, 2020

drazik mentioned this issue Nov 16, 2020

FOUC using new Next.js 10 and React 17 #18769

Closed

This comment has been minimized.

Sign in to view

vercel locked as resolved and limited conversation to collaborators Jan 4, 2022

Pages render without styles for a brief second #15642

Pages render without styles for a brief second #15642

Comments

Lillebo commented Jul 29, 2020

Bug report

Describe the bug

To Reproduce

Expected behavior

System information

Timer commented Jul 29, 2020 • edited Loading

Lillebo commented Jul 29, 2020

Lillebo commented Jul 29, 2020 • edited Loading

Lillebo commented Jul 29, 2020

eeston commented Sep 29, 2020

Lillebo commented Sep 29, 2020

eeston commented Sep 29, 2020

eeston commented Sep 30, 2020

Lillebo commented Sep 30, 2020

eeston commented Oct 1, 2020

Lillebo commented Oct 1, 2020

eeston commented Oct 1, 2020

Lillebo commented Oct 1, 2020

armageddon808 commented Oct 17, 2020

ghost commented Oct 21, 2020 • edited by ghost Loading

ghost commented Nov 2, 2020

MontoyaAndres commented Nov 12, 2020

Timer commented Nov 12, 2020

TylerJNewman commented Dec 7, 2020

LennyDiggelen commented Dec 7, 2020

TylerJNewman commented Dec 7, 2020

kb1995 commented Dec 23, 2020

scottmay2020 commented Jan 4, 2021 • edited by Timer Loading

faizullah11 commented Jan 14, 2021

nagman commented Jan 16, 2021

nikoladev commented Feb 12, 2021 • edited Loading

Aktenor15 commented Mar 9, 2021

osequi commented Mar 30, 2021

muntasirsyed commented Mar 30, 2021

lima-eduardo commented Apr 27, 2021 • edited Loading

VertikaJain commented Jun 3, 2021 • edited Loading

timneutkens commented Jun 3, 2021

VertikaJain commented Jun 4, 2021 • edited Loading

jwandekoken commented Jul 10, 2021 • edited Loading

ansonlowzf commented Jul 16, 2021

This comment has been minimized.

raleighslack commented Aug 3, 2021 • edited Loading

sidwebworks commented Aug 25, 2021

artus9033 commented Aug 27, 2021

gburgi commented Sep 10, 2021

tamal-sen commented Sep 26, 2021

CameronCT commented Oct 21, 2021

Jerome1337 commented Nov 2, 2021

artus9033 commented Nov 2, 2021 • edited Loading

Jerome1337 commented Nov 2, 2021

jonatantibarovsky commented Jan 3, 2022

balazsorban44 commented Jan 4, 2022

Timer commented Jul 29, 2020 •

edited

Loading

Lillebo commented Jul 29, 2020 •

edited

Loading

ghost commented Oct 21, 2020 •

edited by ghost

Loading

scottmay2020 commented Jan 4, 2021 •

edited by Timer

Loading

nikoladev commented Feb 12, 2021 •

edited

Loading

lima-eduardo commented Apr 27, 2021 •

edited

Loading

VertikaJain commented Jun 3, 2021 •

edited

Loading

VertikaJain commented Jun 4, 2021 •

edited

Loading

jwandekoken commented Jul 10, 2021 •

edited

Loading

raleighslack commented Aug 3, 2021 •

edited

Loading

artus9033 commented Nov 2, 2021 •

edited

Loading