Material-ui: CSS blinking with NextJS

[dmbaranov]

Problem description

While using Material-UI with NextJS, there is a "CSS blinking" on first loading. So when I reload page, I don't have any styles at all. After 0.5 sec styles are applied, the whole content is jumping and looks beautiful. But this behaviour looks awfully. I'm not sure if this is a problem from your side or from NextJS. So sorry if it's a wrong place for this issue.

Steps to reproduce

Download example from this link and launch it.
https://github.com/callemall/material-ui/tree/v1.0.0-beta.6/examples/nextjs

Versions

• Material-UI: next
• React: latest
• Browser: Chrome 60

[oliviertassinari]

Can you reproduce the same with the beta.7? https://github.com/callemall/material-ui/tree/v1.0.0-beta.7/examples/nextjs

[dmbaranov]

Yes, exactly same behaviour. As I wrote in the issue, I use Material-UI: next, which is the latest version (1.0.0.7). So as I understand, everything is similar between these examples.

[oliviertassinari]

I was wondering as you used the beta.6 référence on the issue description.

[dmbaranov]

Ye, I saw this too, but at that moment I couldn't find an example with the latest version.

But returning back to the issue, do you have any ideas about it?

[oliviertassinari]

I confirm the issue. I'm having a look.

[oliviertassinari]

I have figured out the issue. The example was recycling the same sheetsManager between different requests. Meaning that it's working for the first time, the second time, he thinks that the style is already injected so he skips them. Providing a new instance at each SSR render fix the issue.

[aliogaili]

I'm still seeing flicker in the instapaper theme with nextjs....

[francisrod01]

@aliogaili @oliviertassinari I'm facing this issue too. I don't understand when it was solved and how. :eyes:

[oliviertassinari]

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

[francisrod01]

@oliviertassinari That's not what I mean. Well, I'll try to explain it so.
I can see that we need to respect the order of components: Box needs to come at the top level before Typography, but there's not enough.

Here's a screenshot from the first load of the page. It brings the correct style and 1 second later, it shows up as below:

And here's the same page, but when I navigate back to it: