Flash of Unstyled Content 디버깅

문제

FOUC 이슈가 발생

해결

• nextjs v13.3.1 이상 버전으로 설정
• @import url("cdn") 대신 아래의 방법으로 설정

• link 태그 사용

  <link href="https://your-cdn-url.com/your-font.css" rel="stylesheet" type="text/css">

• @fontface로 폰트 설정

@font-face {
  font-family: 'Custom Font';
  src: url('https://cdn.example.com/fonts/custom-font.woff2') format('woff2'),

요약

• nextjs v13.3.1 이전 버전에서 app dir 사용 시 발생하는 이슈. 이후 버전에서 수정됐다. issue
• @import 키워드 사용 시 키워드 이후 css 코드는 호출이 완료된 이후 적용된다. (cascade - csswg)

@import 를 주의해서 사용하자

해당 프로젝트에는 app/layout.tsx 파일에 global.css 를 호출하고있다.

@import url("//cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");

...

이 css 파일이 적용되는 과정을 생각해보자.

1. script에 import 한 css 파일은 minify 된다. (여기서는 nextjs와 postcss에 의해서)

2. 브라우저의 Performance tab에서 녹화 기능으로 브라우저가 받은 리소스를 확인할 수 있다.

/* @tailwind base 등 기본 css */
...

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.\!bg-opacity-30 {
    --tw-bg-opacity: 0.3!important
}

/* 사용자가 작성한 className css들의 minify */
.bg-\[url\(\'\/assets\/beta\/bg\.png\'\)\]{background-image:url(/assets/...

3. 마찬가지로 브라우저가 리소스를 해석하고 화면에 표현하는 동작도 Performance 탭에서 확인할 수 있다.

4. FCP (First Contentful Paint) 단계에서는 우리가 의도한 스타일이 적용되어있지 않다.

5. pretendard web font가 import 된 이후 Recalculate style 과정을 거쳐서 화면에 스타일이 입혀진다.

stackoverflow에도 css에서 import를 사용하는 방법에 대한 글이 있다.