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

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

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

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

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

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

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

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