1

Prelude

So, this issue bothers me for a week or so, I dug a lot to try to slove it but with no success.
I understand that the next server probably does't render my styles and I need to inject them, but I tried the suggested solutions and still the problem persists.

Also tried to use next/dynamic with ssr: false which makes a difference but not in the right, direction also with suspense: true and <Suspense fallback="loading"> which in the first place requires react v18+, react-dom v18+ and NextJS v12+ and on the second place breaks on initial load and breaks the styles somehow, so we exclude this as a solution.

More about the problem

Firstly this problem is observed only on the build version of the project, on development enviroment its OK.
What I observe is that when we clear the cache and load a particular page in our project the page gets loaded some elements/components are where they are supposed to be, but others are not, and this is because the styles for them are not loaded yet and this leads to snap of the page.
After that if we reload the page normally everything is where is supposed to be and we do not observe this kind of snapping, on the other hand if we hard reload or reload with clear cache the page snaps.

Versions

next 12.1.5

react 17.0.1 react-dom 17.0.1

@emotion/react 11.8.2 @emotion/styled 11.8.1

@mui/material 5.5.3 @mui/styles 5.5.3

For now I can not include any code or screenshots

Dobromir Kirov
  • 934
  • 4
  • 16

1 Answers1

0

It is very new issue and currently its in progress

You can follow these links for updates and information about the problem:

mnajdova commented 5 days ago
Let's wait for the next version that contains the fix in vercel/next.js#36675 (comment) to be stable so that we can test the changes reliably.

zhulduz commented 5 days ago
Version next: 12.1.7-canary.4 works properly for me

I will update the answear if any solutions are found...

Dobromir Kirov
  • 934
  • 4
  • 16