← React 목록으로

FOUC 문제

React

FOUC란?

FOUC = Flash Of Unstyled Content

즉, 스타일이 적용되지 않은 콘텐츠가 잠깐 보였다가 스타일이 적용되는 현상입니다.

저의 경우 블로그의 폰트에서 문제가 발생했습니다.

  1. 페이지 열림
  2. 기본 폰트로 텍스트 표시
  3. 커스텀 폰트 다운로드
  4. 폰트가 교체됨

이런 일련의 과정이 짧은시간이었지만 존재했고 0.2초 정도 바뀌는 깜빡임이 발생했습니다.


해결방법

해결은 역시 Next.js 공식 홈페이지에 있었습니다. globals.css에 폰트를 선언하는 것 대신 localFont를 적용하여 안정적으로 깜빡임이 해결되었습니다.

TYPESCRIPT
1import localFont from 'next/font/local'
2
3export const myFont = localFont({
4  src: '../public/fonts/MyFont.woff2',
5  display: 'swap'
6})

매일 Next.js를 설치할때마다 지우면서 익숙했던 코드인데 제대로 알아보지 않았던 부분이 아쉽네요.