search

elastic / next-eui-starter

Start building Kibana protoypes quickly with the Next.js EUI Starter
https://elastic.github.io/next-eui-starter/
Apache License 2.0
93 stars 30 forks source link

Flash of unstyled content when loading from server #75

Open 1a57danc3 opened 1 year ago

1a57danc3 commented 1 year ago
Screen Shot 2022-09-28 at 11 50 00 Screen Shot 2022-09-28 at 11 49 53

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 commented 1 year ago

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

Change some components to test this issue.

miukimiu commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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

1a57danc3 commented 1 year ago

Thanks @constancecchen

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

chandlerprall commented 1 year ago

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:

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 commented 1 year ago

@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 commented 1 year ago

What is the Solution to Problem?

b0r1sp commented 1 year ago

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 commented 1 year ago

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 commented 12 months ago

@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 commented 12 months ago

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 commented 12 months ago

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 commented 12 months ago

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 commented 11 months ago

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 commented 10 months ago

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