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?