FOUC on Next.js

[Guillaume P.]

Hi, 

Working on a preloader on Next.js, I  still have FOUC on my animation.

Vercel : https://preloader-next-iend9lhi2-devmrobot.vercel.app/

Stackblitz : https://stackblitz.com/edit/nextjs-anp715?file=pages%2Fpreloader.js 

I use useLayoutEffect but no effect  and I have a Warning on my console :

Quote

"useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes."

 

I also tried to use this Tip, but I don't know how to adapt it for Next.js

 

How to avoid this problem ?

Thank's !

 

[Rodrigo]

Hi,

 

Unfortunately the Stackblitz example has some errors during compile so there's not much we can do with it. Please try to resolve them or try creating a live example in codesandbox.

 

Indeed React will complain about layout effect during server side rendering. To avoid that use this little hook @OSUblake crafted:

https://greensock.com/react-advanced#useIsomorphicLayoutEffect

 

If you keep having FOUC in your app a good choice is to set the element's opacity to 0 in your CSS, then just before creating a from instance set them to 1 using GSAP:

.my-element {
  opacity: 0;
  /* Other Styles Here */
}

gsap.set(".my-element", { opacity: 1 });

gsap.from(".my-element", { opacity: 0, /* Other GSAP Config Here */ });

Let us know if you have more questions.

 

Happy Tweening!

[Guillaume P.]

Hi Rodrigo, 

I really appreciate your work and support  !

Indeed, opacity seems to be the best option to me..