Next.js 에서 next-themes 를 사용하여 theme 구현하기

질문이 있습니다. 의문이 가는 부분은 아래의 설명입니다. ------------------------------------------------------------------------------------ "use client" 를 작성해도, next-themes 라이브러리를 사용하여 테마를 전환하는 UI 가 서버 사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG) 시에 hydration mismatch 경고를 발생시킬 수 있습니다. 그 이유는 next-themes 라이브러리에서는 useTheme 훅을 사용하여, 테마를 가져오게 되는데, 이 훅은 클라이언트 전용 객체인 window 객체를 사용하고 있고, 서버에서는 useTheme 훅을 사용하여, 현재 테마를 가져올 수 없으며, 이 때문에 테마가 undefined 로 설정이 되기 때문이다. 이러한 이유로, 서버에서는 테마를 렌더링 할 수 없으므로, 클라이언트에서 마운트 된 후에만 테마 전환 UI 를 렌더링 할 수 있도록 해야 합니다. ------------------------------------------------------------------------------------ SSR 또는 SSG 에 hydration mismatch 경고가 발생하는 시점은, useTheme 을 호출하는 컴포넌트가 SSR / SSG 렌더링일 경우에만 해당하는거 아닌가요? 어째서 useTheme 훅을 호출하는 곳에서 "use client" 를 작성하여 CSR 로 렌더링 하는데 서버에서는 window 객체를 참조하게 되는거죵? 예를 들어, ToggleThemeButton 컴포넌트에서 컴포넌트 상위에서 "use client" 를 작성하여 CSR 로 렌더링하고, useTheme 훅을 호출하게 되는 시점은 window 객체를 참조할 수 있을텐데, 위의 설명에서는 "next-themes 라이브러리에서는 useTheme 훅을 사용하여, 테마를 가져오게 되는데" 이 시점이 도대체 언제인지 궁금합니다. next-themes 라이브러리는 자체적으로 CSS 변수를 사용하여, 테마를 전환한다고 하는데, 이 때문에 테마가 변경되어도 CSS 파일을 다시 로드 할 필요가 없고, CSS 변수의 값만 변경이 될텐데, ToggleThemeButton 컴포넌트에서 "use client" 를 지정하게 되면, 서버에서 window 객체를 참조하게 될 일이 없지 않나용? 참조 next-themes https://github.com/pacocoursey/next-themes hydration mismatch 를 해결하는 방법에 대한 설명 https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch