More than 3 years have passed since last update.

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

Posted at 2021-09-26

以下のように初期レンダリングの際に一瞬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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up