개발자

Next.js app router 다크모드 깜빡 거림 문제

2023년 12월 30일조회 315

혹시 next app router에서 다크모드 설정 깜빡거리는 현상 해결해 보신 분 계신가요? 테마는 로컬스토리지에 저장해서 초기에 보여줍니다. Next 14 + styled-components 사용중입니다. 기존 page router에서는 _document.tsx에서 script 태그 dangerouslySetInnerHTML 사용해서 DOM요소 렌더링 이전에 로컬스토리지 저장된 모드 가져와서 관련 코드 실행 되게 끔 해서 깜빡임 현상을 해결했었습니다. app router에서 layout.tsx에 Script태그 이용해서 똑같이 적용하면 DOM요소가 렌더링 되고나서 실행이 되어서 기존 다크모드설정 후 새로고침 시 깜빡거리는 문제가 발생합니다ㅠㅠ 기존에 _document.tsx랑_app.tsx에 작성된 코드들은 layout.tsx에서 관리하는 걸로 알고 있는데 동작 방식이 다른 건지 기존과 다르게 동작합니다.. 여러 옵션을 사용해봐도 똑같네요... 관련 자료도 너무 없어서 nextjs github issue 뒤져보니까 똑같지는 않지만 비슷한 문제를 겪고 있는 issue가 있던데 해결이 안 된 거 같더라구요.. 이러한 상황에는 어떻게 해야할까요..? 개인 프로젝트고 해결이 된다면 정말 좋겠는데, 면접에서 이렇게 해결하지 못한 상황에 대해서는 어떻게 말해야할지도 고민입니다..

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

김태우님의 프로필 사진

다크모드랑 라이트모드랑 바뀌는 시점에 깜빡거린다는 말씀이신가요? 만악 그렇다면 바뀌는 시점에 새로고침하도록 코드를 넣으셨나요?

profile picture

익명

작성자

2023년 12월 31일

처음 웹 페이지 진입시에 로컬스토리지를 통해서 저장된 다크모드를 보여줍니다. 이때 다크모드로 설정해놓고 새로고침 하면 기본은 라이트모드인데 로컬스토리지가 클라이언트 환경에서 작동되다 보니, DOM이 렌더링 된 후 초기 다크모드 관련 코드가 동작되어 깜빡거리는 것과 같이 보이는 현상입니다 page router에서는 본문과 같이 문제를 해결하였지만 app router로 마이그레이션 하면서 똑같은 방식으로 해결이 안되는 상황입니다.. 새로고침 하도록 코드를 넣는 다는 게 구체적으로 무엇인지 알 수 있을까요?

김태우님의 프로필 사진

김태우

Web Developer2023년 12월 31일

기본을 라이트모드로 설정하지 마시고 윈도우 로컬 테마로 설정하는 것은 어떨까요? 저도 그렇게 해서 해결했던 거 같은데요!

profile picture

익명

작성자

2023년 12월 31일

네 그렇게 시도 했는데 그것도 자바스크립트로 설정되다 보니 렌더링 된 후 작동해서 똑같습니다ㅠㅠ

김태우님의 프로필 사진

김태우

Web Developer2023년 12월 31일

근데.맨 처음 렌더링 시에 화면 깜빡임은 서버 사이드 렌더링의 특징이라서 어쩔 수 없지 않나요?

profile picture

익명

작성자

2023년 12월 31일

네 그 특징을 우회하고자 이전에는 _document.tsx에 스크립트를 작성했었습니다. 구글링을 해봐도 다 그런 방법밖에 없더라구요. 그런데 app router에서는 _document.tsx 대신에 layout.tsx에 스크립트를 작성했는데 동일하게 작동되지 않습니다

node님의 프로필 사진

이거 해결 되셨을까요? 저도 지금 같은 문제를 해결중이라... @.@

profile picture

익명

작성자

3월 22일

당시에 문제는 해결하지 못했고 vanilla-extract로 마이그레이션 진행하면서 next-themes로 해결했습니다

node님의 프로필 사진

node

Web Developer3월 23일

흐아ㅜ 그렇군요 저도 참고해야겠네요 답변 감사합니다

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

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

또는

이미 회원이신가요?

목록으로

실무, 커리어 고민이 있다면

새로운 질문 올리기

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