Remove Flash Of Unstyled Content (FOUC) using emotion and nextjs

javascript

emotion-css

nextjs

Flash Of Unstyled Content (FOUC) is when a website is loading and the user can briefly see the page unstyled. I was experiencing this using NextJS 13.2.3 and the cause was a missing `_document.js` file to integrate emotion caching properly on the server side.

I had noticed this page flicker when I originally deployed. It was when I saw it disorient a user of the site that I decided to fix it. This effect may be larger on a slower connection.

a momentary flicker

after a second the style would finally load

This one took me a while to narrow it down to the Emotion cache being the problem. Turns out I was missing a vital step that takes place in the _document.js file. You need to add this:

• Flash of unstyled content
• Next.Js + MUI v5 tutorial