Next.jsで初期レンダリングの際のCSSが効かないときの対処法 #React

以下のように初期レンダリングの際に一瞬CSSが当たらない問題をFOUCというそうです

CSS @importルールを使用している一部のページでは、MS Internet ExplorerのWindows版で、スタイル化されていないページのコンテンツが一瞬フラッシュするという奇妙な表示の奇妙な現象が発生します。私はこの現象を「スタイル化されていないコンテンツのフラッシュ（Flash of Unstyled Content）」、略して「FOUC」と呼んでいます。

まずやったこと

上記の記事を参考に

_document.tsx

class MyDocument extends Document {
  render() {
    return (
      <Html lang="ja">
        <Head />
        <body>
          // ****追加****
          <script> </script>
          // ********
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

ただ自分の環境ではこれだけでは治りませんでした。

そこで_app.tsxでコンポーネントのマウントが完了したタイミング(useEffectが呼ばれる)ときにフラグをtrueにしてtrueのときにコンポーネントを表示させることでFOUCの問題は解決しました。

_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  const [show_screen, setShowScreen] = useState(false)

  useEffect(() => {
    setShowScreen(true)
  }, [])

  return (
    <>
      {show_screen ? <>
        <GrobalStyle />
        <Header categories={categories} tags={tags} />
        <Component {...pageProps} />
        <Footer />
      </> : ''}
    </>
  )
}


export default MyApp