Next.js+CSS Modules에서 FOUC(CSS의 적용 지연으로 깜박임)가 발생할 때의 잠정적 대책

Next.js v10.0.6 포인트 메시지입니다.최신 정보는 이쪽 아이슈를 쫓는 게 좋을 것 같습니다.https://github.com/vercel/next.js/issues/18769

Next.js에 근본적인 원인이 있는지 확인하지 못했습니다

발생한 문제

처음 읽었을 때https://zenn.dev 한순간에 스타일이 일치하지 않는 상태에서 문제가 발생했습니다.
이른바 FOUC(Flash of unstyled content) 현상이다.조금 늦게 몸에 맞았기 때문에 산만한 느낌이 들어서 사용자 체험이 좋지 않았다.
참고로 발생한 조건은 다음과 같다.

Next.js에서 CSS Modulesstyled-components를 사용하는 데 문제가 없음)

후술한 Issuestyled-jsx에서도 같은 문제가 보고되었다

Google Chrome(FireFox 및 Safari 문제 없음)

SSR 시(클라이언트 페이지 마이그레이션 시 문제 없음)

크롬의 프로펠러드 주위의 행동에 원인이 있다고 생각하지만 검증할 수 없다.

해당 이슈

여러 곳을 찾아보니 아래의 이슈를 발견했다.이번에 발생한 문제는 아마 여기에 있을 것이다.

2021/02/09까지는 해결되지 않았지만 멘토너에게'버그'라벨이 있어 넥스트가 있었다.js방면에서 대응할 가능성이 있습니다.

현상적 연구

위와 같은 이슈에는 비어있는<script>을 <body> 뒤에 두면 문제가 발생하지 않는다는 평이 있다.
_document.tsx

 import Document, { Html, Head, Main, NextScript } from 'next/document';
 
 class MyDocument extends Document {
   render() {
     return (
       <Html lang="ja">
         <Head />
         <body>
 +          <script> </script>
           <Main />
           <NextScript />
         </body>
       </Html>
     );
   }
 } 

 export default MyDocument;

이 해커Firefox에서의 FOUC 대책 - Jxck는 봤지만 이번 크롬은 효과가 있었다.
참조: Various websites like GitHub load with flash of unstyled content (FOUC)
근본적인 해결이 아니기 때문에 정보를 계속 추적하고 싶어요.

Reference

이 문제에 관하여(Next.js+CSS Modules에서 FOUC(CSS의 적용 지연으로 깜박임)가 발생할 때의 잠정적 대책), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/catnose99/articles/3c106c81cbfdec

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다