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
13 Replies
Hi @yaztoosleepy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
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 :speech_balloon:
----------------------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?
<@716735177384001620> kapa.ai is still learning and improving, please let us how it did by reacting below
fair-rose•16mo ago
is this stay like this ? or just a flicker ?
adverse-sapphire•16mo ago
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
fair-rose•16mo ago
probably this will not cause problem on production build because css will be cached
adverse-sapphire•16mo ago
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
fair-rose•16mo ago
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
adverse-sapphire•16mo ago
Its really bad in nextjs example haha
Same issue
Should I move away from nextjs antd mix or make it client side render only 😬
fair-rose•16mo ago
i believe production build will work good
adverse-sapphire•16mo ago
https://with-ant-design-lime.vercel.app/
Isn't this a production build ?
fair-rose•16mo ago
probably
adverse-sapphire•16mo ago
Suffers the same fate here,
Unstyled html is displayed first on reload, and happens on every subsequent reload too