title: Next.js 9+ FOUC (Flash or Unstyled Content) with Styled Components
body: <p>Have spent a couple days on this issue sourcing solutions and ideas from most of SA and Reddit however to no avail..</p>
  <p>Upon load both in production and local every load presents the whole html without any styling before then being injected into DOM..</p>
  <p>Currently this is my projects key files:</p>
  <p><code>_document.js</code></p>
  <pre><code>import { ServerStyleSheet } from &quot;styled-components&quot;;
  import Document, { Main, NextScript } from &quot;next/document&quot;;
  
  export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
      const sheet = new ServerStyleSheet();
      const originalRenderPage = ctx.renderPage;
  
      try {
        ctx.renderPage = () =&gt;
          originalRenderPage({
            enhanceApp: (App) =&gt; (props) =&gt;
              sheet.collectStyles(&lt;App {...props} /&gt;),
          });
  
        const initialProps = await Document.getInitialProps(ctx);
        return {
          ...initialProps,
          styles: (
            &lt;&gt;
              {initialProps.styles}
              {sheet.getStyleElement()}
            &lt;/&gt;
          ),
        };
      } finally {
        sheet.seal();
      }
    }
  
    render() {
      return (
        &lt;html lang=&quot;en&quot;&gt;
        &lt;Head&gt;
          &lt;title&gt;namesjames&lt;/title&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
          &lt;script src=&quot;/static/chrome-fix.js&quot; /&gt;
          &lt;link href=&quot;/above-the-fold.css&quot; /&gt;
        &lt;/Head&gt;
          &lt;body&gt;
  
            &lt;script src=&quot;/noflash.js&quot; /&gt;
            &lt;Main /&gt;
            &lt;NextScript /&gt;
            &lt;script&gt; &lt;/script&gt;
          &lt;/body&gt;
        &lt;/html&gt;
      );
    }
  }
  </code></pre>
  <p><code>_app.js</code></p>
  <pre><code>/* eslint-disable class-methods-use-this */
  import App from &quot;next/app&quot;;
  import React from &quot;react&quot;;
  import { ThemeProvider } from &quot;styled-components&quot;;
  import { ParallaxProvider } from 'react-scroll-parallax';
  import Header from &quot;../components/Header&quot;;
  import theme from &quot;../theme&quot;;
  import GlobalStyles from &quot;../GlobalStyles&quot;;
  import DarkModeToggle from '../components/toggle/toggleMode';
  import Footer from '../components/Footer'
  import LazyLoad from 'react-lazy-load';
  import Router from 'next/router';
  import styled from 'styled-components'
  // import '../style.css'
  
  
  const Loaded = styled.div`
    opacity: ${(props) =&gt; props.loaded ? &quot;1&quot; : &quot;0&quot;};
  `
  
  export default class MyApp extends App {
    state = { isLoading: false, loaded: false }
  
    componentDidMount() {
      // Logging to prove _app.js only mounts once,
      // but initializing router events here will also accomplishes
      // goal of setting state on route change
      console.log('MOUNT');
      this.setState({loaded: true})
  
  
  
      Router.events.on('routeChangeStart', () =&gt; {
        this.setState({ isLoading: true });
        console.log('loading is true, routechangeStart')
      });
  
      Router.events.on('routeChangeComplete', () =&gt; {
        this.setState({ isLoading: false });
        console.log('loading is false, routeChangeComplete')
      });
  
      Router.events.on('routeChangeError', () =&gt; {
        this.setState({ isLoading: false });
        console.log('loading is false, routeChangeError')
      });
    }
    render(): JSX.Element {
      const { isLoading } = this.state;
      const { Component, pageProps, router, loaded } = this.props;
      return (
        &lt;Loaded loaded={this.state.loaded}&gt;
          &lt;ThemeProvider theme={theme}&gt;
            &lt;GlobalStyles /&gt;
            &lt;ParallaxProvider&gt;
            &lt;Header /&gt;
             {isLoading &amp;&amp; 'STRING OR LOADING COMPONENT HERE...'}
            &lt;Component {...pageProps} key={router.route} /&gt;
            &lt;LazyLoad offsetVertical={500}&gt;
              &lt;Footer /&gt;
            &lt;/LazyLoad&gt;
            &lt;/ParallaxProvider&gt;
            &lt;DarkModeToggle /&gt;
          &lt;/ThemeProvider&gt;
        &lt;/Loaded&gt;
      );
    }
  }
  </code></pre>
  <p><code>index.js</code></p>
  <pre><code>import { color } from &quot;styled-system&quot;;
  import { OffWhite } from &quot;../util/tokens&quot;;
  import Hero from &quot;../components/Hero&quot;;
  import Banner from  '../components/Banner'
  import TitleText from '../components/TitleText'
  import HomeTitleCopyScene from '../components/HomeTitleCopyScene'
  import TwoCards from '../components/TwoCards'
  import LazyLoad from 'react-lazy-load';
  
  function Home(): JSX.Element {
    return (
      &lt;div className=&quot;container&quot;&gt;
        &lt;Banner /&gt;
        &lt;HomeTitleCopyScene /&gt;
        &lt;LazyLoad offsetVertical={1000}&gt;
          &lt;TwoCards /&gt;
        &lt;/LazyLoad&gt;
      &lt;/div&gt;
    );
  }
  
  export default Home;
  </code></pre>
  <p>As some might see I have tried multiple implementations and am just a bit confused as to what it could be at this stage..</p>
  <p>Any help appreciated and I can provide more information upon request.. Many thanks</p>