개발자

Nextjs 에서 부분적으로 FOUC 가 발생하는 것 같습니다.

2023년 07월 31일조회 367

안녕하세요. 오늘도 Next의 심오함에 허우적대고 있는 주니어 프론트엔더 입니다. Next 에서 디자인관련 프레임워크와 라이브러리로 Ant-Design 과 Styled-components를 선택하여 프로젝트를 진행하는 중입니다. 그리고 방식은 기본 Antd의 컴포넌트를 import 하여 필요 부분만 Styled-components로 덮어 커스텀하는 방안으로 택하였습니다. 이전에 Next는 기본적으로 서버에서 html을 생성하려는 경향이 있기에 css-in-js는 가끔가다 hydrating 과정으로 인해 스타일이 적용되지 않는 부분만 먼저 보여진다고 들었습니다. 그래서 현재 next 13을 사용하고 있어 (app routing 방식이 아닌 구 버전인 pages routing 방식을 사용하고 있습니다.) next.config.js에서 styled-components를 인식하게 도와주는 설정 코드를 작성하였습니다. - 해당 설정은 최하단에 첨부하였습니다. 문제는 FOUC 관련 이슈가 일부 컴포넌트에만 나타납니다. Button컴포넌트와 Input컴포넌트를 위와 같은 스타일 방식으로 제작을 하였는데, 페이지가 리프레쉬가 되면 Button 컴포넌트는 기존 styled-components의 커스텀을 유지하지만, Input 컴포넌트는 styled-comopents의 커스텀을 입히기 전의 Ant-Design의 기본 디자인으로 렌더링되는 문제가 발생하였습니다. 그래서 제가 진행했던 FOUC 관련 설정에 문제가 있는지 궁금하여 질문을 드리려고 합니다!

1/* next.config.js */
2
3const nextConfig = {
4  reactStrictMode: true,
5
6  /* css-in-js FOUC 문제 해결 */  
7  compiler: {
8    styledComponents: true
9  },
이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

이형래님의 프로필 사진

안녕하세요! Next.js13 버전이지만 app라우팅이 아니라면 _document.js 가 있으실까요? 그렇다면 아래 링크방법을 참고해보시면 좋을것 같습니다~ - https://handhand.tistory.com/291 혹은 app라우팅이라면 저도 해보진 않았지만 관련글 있어서 같이 링크 첨부 드립니다! - https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components - https://jha-memo.tistory.com/99

이상원님의 프로필 사진

이상원

작성자

Frontend Dev2023년 08월 03일

아 안그래도 document파일 이 글을 올리고 바로 확인하여서 구성하였습니다 ㅎㅎ. 답변감사해요!!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!