absent-sapphire
absent-sapphire14mo 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
No description
13 Replies
kapa.ai
kapa.ai14mo ago
Hi @yaztoosleepy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai14mo ago
---------------------- 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?
kapa.ai
kapa.ai14mo ago
<@716735177384001620> kapa.ai is still learning and improving, please let us how it did by reacting below
exotic-emerald
exotic-emerald14mo ago
is this stay like this ? or just a flicker ?
absent-sapphire
absent-sapphire14mo 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
exotic-emerald
exotic-emerald14mo ago
probably this will not cause problem on production build because css will be cached
absent-sapphire
absent-sapphire14mo 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
exotic-emerald
exotic-emerald14mo 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
absent-sapphire
absent-sapphire14mo 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 😬
exotic-emerald
exotic-emerald14mo ago
i believe production build will work good
absent-sapphire
absent-sapphire14mo ago
https://with-ant-design-lime.vercel.app/ Isn't this a production build ?
exotic-emerald
exotic-emerald14mo ago
probably
absent-sapphire
absent-sapphire14mo ago
Suffers the same fate here, Unstyled html is displayed first on reload, and happens on every subsequent reload too