질문이 있습니다.

의문이 가는 부분은 아래의 설명입니다.

------------------------------------------------------------------------------------

"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