NextJS에서 글자가 깜빡일 때

NextJs에서 최초 렌더링 이후, 최초에 버튼을 누르면 font가 깜빡거리는 현상이 발생하였다.

가능성들

1. 상태 관리의 실패
2. FOUC/ FOUT
3. styled-component 문제

노오력

1. 상태 관리의 실패 => React.memo(), useCallback(), 컴포넌트 분리 등등 할 수 있는 거 다 해봤지만 여전했다... key 값을 unique하게 줘서 해당 컴포넌트만 재렌더링 되는 것을 확인했지만 폰트 깜빡임은 여전........

2. FOUC / FOUT => 이건 아직 잘 모름..
   참고 : https://github.com/im-d-team/Dev-Docs/blob/master/Browser/FOUC.md

3. styled-component 문제 => 킹 갓 구글링... ㅎㅎ 아래에 설명하겠음.

원인

• styled-component에 font를 전역으로 적용하기 위해 createGlobalStyle을 사용
• styled-component는 스타일이 render 될 때마다, head 아래의 style 태그의 children을 변경
• 새로운 스타일이 생길 때마다 폰트를 재요청

해결방법

• global style에서 font를 삭제하고 css파일로 font만 따로 load한다

정답인지는 모르겠지만 해결....ㅎㅎ

아주 큰 도움이 되었습니다.
참고 및 큰 도움 from : https://ryublock.tistory.com/37