React Styled Components Flickering On First Load [Solved]

What is react styled components flickering on first load?

This flickering, known as Flash of Unstyled Content (FOUC), occurs when the browser renders HTML before the Styled Components JavaScript has injected the necessary CSS. This usually happens in Server-Side Rendering (SSR) environments like Next.js or Gatsby.

Step-by-Step Solutions

1. Implement Server-Side Style Injection

To fix flickering in Next.js, you must collect all styles during the server-side render. This ensures the CSS is sent to the browser within the initial HTML document.

Create or update your _document.js file to include the ServerStyleSheet instance from styled-components.

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

2. Configure Babel for Styled Components

The Babel plugin is essential for consistent class name generation between the server and the client. Without it, hydration mismatches can trigger visual jumps and flickering.

Install the plugin and add it to your .babelrc configuration file.

npm install --save-dev babel-plugin-styled-components

Then, add the following to your configuration:

{
  "plugins": [
    ["styled-components", { "ssr": true }]
  ]
}

3. Use the Next.js Compiler (SWC)

If you are using Next.js 12 or newer, you can replace Babel with the faster Rust-based compiler. This simplifies the configuration while maintaining SSR support.

Update your next.config.js to enable styled-components support natively.

module.exports = {
  compiler: {
    styledComponents: true,
  },
}