Remove gatsby FOUC (flash of unstyled content / text)

gatsby-ssr.js

// apparently there is some hidden settings at https://www.gatsbyjs.org/docs/debugging-replace-renderer-api/#fixing-the-replacerenderer-error
import React from "react"
import { renderToString } from "react-dom/server"
import { ServerStyleSheet, StyleSheetManager } from "styled-components"

export const replaceRenderer = ({
  bodyComponent,
  replaceBodyHTMLString,
  setHeadComponents,
}) => {
  const sheet = new ServerStyleSheet()

  const app = () => (
    <StyleSheetManager sheet={sheet.instance}>
      {bodyComponent}
    </StyleSheetManager>
  )
  replaceBodyHTMLString(renderToString(<app />))
  setHeadComponents([sheet.getStyleElement()])
}