Next.js: Pages render without styles for a brief second

Created on 29 Jul 2020 · 18Comments · Source: vercel/next.js

Bug report

Describe the bug

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

Jul-29-2020 20-54-52

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

please add a complete reproduction

Source

Lillebo

👀1 👍1

All 18 comments

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

Timer on 29 Jul 2020

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

Lillebo on 29 Jul 2020

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

Lillebo on 29 Jul 2020

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?

Lillebo on 29 Jul 2020

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?

johneas10 on 29 Sep 2020

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

Lillebo on 29 Sep 2020

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.

johneas10 on 29 Sep 2020

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

johneas10 on 30 Sep 2020

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 😕

Lillebo on 30 Sep 2020

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

johneas10 on 1 Oct 2020

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

Lillebo on 1 Oct 2020

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.

johneas10 on 1 Oct 2020

Yup, no worries 🙂

Lillebo on 1 Oct 2020

@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.

script tag

natearmagost on 17 Oct 2020

👍1

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