Understanding and fixing FOUC

web devlopment fouc

Understanding FOUC

FOUC stands for Flash of Unstyled Content. This is that brief moment in time when you see unstyled content for the web page being rendered because the css for the page has not fully loaded.

To understand this problem, you need to understand how the browser renders a web page. Here's a simplified view of how browser renders a page.

Image Source

Once the browser receives the web page from the website server, it feeds the html file to html parser which starts building the DOM tree. During this process, the browser might come across stylesheet loading directives. This might be part of link element or a style block.

In scenarios where the css is not render blocking, the browser will continue building both html and css tree in parallel. It will then start rendering the dom. Now if the css tree is not fully ready by this time, the two trees wont be combined and browser will end up rendering the un-styled content. If you want to deep dive into how browser parses the page, checkout this article

Fixing FOUC

Now this blog was plagued with FOUC as well and here's how I fixed it.

Update your _document.js to set opacity to 0 for the top level html element.

import { Head, Html, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en" style={{ opacity: 0 }}>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Update your _app.js to set opacity back to 1.

import '../styles/styles.css';
import PropTypes from 'prop-types';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    document.documentElement.style.opacity = 1; // notice this change
  }, []);

  return <Component {...pageProps} />;
}

MyApp.propTypes = {
  Component: PropTypes.func,
  pageProps: PropTypes.object
};

export default MyApp;