Flash of unstyled content when loading from server

[1a57danc3]

When the page is opened, the page layout is normal, why the page is re-rendered once again.

EUI v63.0.0 is normal, All new versions have this problem.

[1a57danc3]

You can clone this repo https://github.com/elastic/next-eui-starter

Change some components to test this issue.

[elizabetdev]

Hi @h0wardch3ng,

Can you try to replicate the issue with a CodeSandbox?

You can clone this repo https://github.com/elastic/next-eui-starter

Change some components to test this issue.

The next-eui-starter is currently using "@elastic/eui": "^55.1.0" as you can see in the package.json. So is this issue happening on EUI version 55.1.0?

EUI v63.0.0 is normal, All new versions have this problem.

So is this issue happening after v63.0.0? I'm a bit confused. A CodesandBox would be helpful.

[1a57danc3]

@miukimiu

https://github.com/h0wardch3ng/eui-rendering-issue

pnpm install

pnpm run build

pnpm run start

You can use this to test this bug, thanks

[cee-chen]

Pinging @chandlerprall on this one as a perf/rerender expert :)

[1a57danc3]

Thanks @constancecchen

---

@miukimiu EUI versions higher than v63.0.0 all have this rendering problem.

[chandlerprall]

I've been able to reproduce (more or less) the devtools screenshot in both the eui-rendering-issue and next-eui-starter repos. I believe the styled->unstyled->styled changes is an artifact of running the performance audit starting with the existing (styled) page, reloading, and applying styles. I tested this two ways:

• manipulate the page before executing the audit, in the screenshots I see the manipulated version, then flash of unstyled+reloaded app, then styling
• turn off the server & load the "This site can't be reached" error page; start the server and then start the audit: I see the error page, then flash of unstyled+reloaded app, then styling

This leads me to think the root issue is around next+emotion+server-side-rendering. That is supposed to Just Work out of the box since Emotion v10 but I bet EUI's custom emotion cache targets is interfering.

@h0wardch3ng if this sounds accurate to you, I will move this issue over to the next-eui-starter repo.

[1a57danc3]

@chandlerprall
Sorry for my late reply.
Currently the solution to this problem, we are still stuck in the old version, I hope the EUI team can solve this rendering problem, Thanks for your detailed answer.

[Chetan11-dev]

What is the Solution to Problem?

[b0r1sp]

Bump :-)
Renders the purpose of this repo for an easy-start as useless from my point of view.
Please at least give some hints to fix that or provide a status.. thank you so much!

[Chetan11-dev]

To fix this Problem Please run following Command and there will not be flashes of unstyled content

yarn add @elastic/eui@^63.0.0
yarn dev

[caseydlvr]

@Chetan11-dev What happened to the forked repository that supposedly fixed the issue? The repo appears to gone and your comment edited to specify using 63.0.0 to fix the problem. The fact that we're stuck on 63.0.0 is the problem.

[Chetan11-dev]

The fork also just changes the elastic ui version to 63.
I believe it will be easier for people to just run the command instead of using a fork.
Additionally I have been using elastic ui 63 for 4 month+ in production and didn't face any issue.
There is not much difference in components provided by elastic ui 63 and 68. So you can safely use 63.

[b0r1sp]

The fork also just changes the elastic ui version to 63.
I believe it will be easier for people to just run the command instead of using a fork.

Agree, thank you.
Nevertheless, maybe @chandlerprall can give advice how to fix the root cause of this problem.

[caseydlvr]

The fork also just changes the elastic ui version to 63. I believe it will be easier for people to just run the command instead of using a fork. Additionally I have been using elastic ui 63 for 4 month+ in production and didn't face any issue. There is not much difference in components provided by elastic ui 63 and 68. So you can safely use 63.

Ahh I see your intention now. In terms of going from a fresh clone of this repo to a working version, yes I agree that's an easier solution than a fork. But I think at this point a lot of us are already on 63.0.0 (as mentioned in the OP) and are hoping for a solution for upgrading past that. EUI is currently on version 88.3.0 and we're getting left behind.

[tkajtoch]

We plan to update next-eui-starter to the latest Next.js and EUI versions within the next few weeks and provide a fix for the flash of unstyled text bug.

The bug is caused by EUI's Emotion styles not being properly extracted and injected into the document's <head> when rendering on the server side.

For anyone looking for an immediate solution, I recommend following the code in https://github.com/haukurmar/next-13-appdir-with-emotion/tree/master repository and passing the custom EmotionCache instance to EUI by using <EuiProvider cache={registry.cache}> here.

[nhatpham0709]

What's the update on this guys? Really looking forward to this cause next 14 is becoming more stable than ever