Refine•3y ago

Nextjs prerendering issues on load, code generated by refine cli

In my Nextjs & antdesign project generated by refine cli, it suffers from layout shift on load,
How can I fix this

kapa.ai•4/28/23, 6:46 AM

Hi @yaztoosleepy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•4/28/23, 6:46 AM

----------------------
Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation and examples for more information:

Next.js example with Ant Design (https://refine.dev/docs/examples/next-js)
refine documentation (https://refine.dev/docs)

These resources might help you find a solution to the layout shift issue in your Next.js and Ant Design project generated by the refine CLI.
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

Ant Design | refine

refine allows you to build your SSR supported web applications using Next.js. With this example, you can see how to make a simple SSR supported CMS Admin panel using Ant Design.

Overview | refine

What is refine?

kapa.ai•4/28/23, 6:46 AM

@716735177384001620 kapa.ai is still learning and improving, please let us how it did by reacting below

brilliant-lime•4/28/23, 6:47 AM

is this stay like this ? or just a flicker ?

dual-salmonOP•4/28/23, 6:48 AM

Flicker

And it manges to get to normal ui on hydration.
I tried refering to Finefoods project, but as its client side rendered I cannot find a fix

brilliant-lime•4/28/23, 6:48 AM

probably this will not cause problem on production build because css will be cached

Bbrilliant-lime probably this will not cause problem on production build because css will be cac...

dual-salmonOP•4/28/23, 6:49 AM

Good to know that,
As my project is not deployed on any kind of server yet

Any possible fix for this ?
Checked for help in nextjs side too, no luck

brilliant-lime•4/28/23, 6:52 AM

i don't know too.
MUI has entire doc for this https://mui.com/material-ui/guides/server-rendering/#mui-on-the-server but no luck for antd side.

also we checked https://github.com/vercel/next.js/tree/canary/examples/with-ant-design this example, same issue happing on this too

Bbrilliant-lime i don't know too. MUI has entire doc for this https://mui.com/material-ui/guides...

dual-salmonOP•4/28/23, 6:55 AM

Its really bad in nextjs example haha

dual-salmonOP•4/28/23, 6:56 AM

Same issue

dual-salmonOP•4/28/23, 6:56 AM

Should I move away from nextjs antd mix or make it client side render only

brilliant-lime•4/28/23, 6:57 AM

i believe production build will work good

Bbrilliant-lime i believe production build will work good

dual-salmonOP•4/28/23, 6:59 AM

https://with-ant-design-lime.vercel.app/
Isn't this a production build ?

brilliant-lime•4/28/23, 7:00 AM

probably

dual-salmonOP•4/28/23, 7:02 AM

Suffers the same fate here,
Unstyled html is displayed first on reload, and happens on every subsequent reload too