💡 최초 구현

Next.js 프로젝트에서 상태 관리를 Zustand로 하면서, 로그인 상태에 따라 <Header /> 컴포넌트 안의 버튼을 다르게 보여주고자 했다. 그리고 추후에는 관리자 여부로도 UI가 변경될 부분이라 선으로 작업을 해두려고 했다.

🚨 문제 발생: Hydration 오류 + 헤더 중복 렌더링

  1. "Hydration failed" 오류 콘솔에 출력
  2. 헤더가 두 번 렌더링되는 듯한 현상
  3. 깜빡임(Flash) 현상: 헤더가 잠깐 사라졌다가 다시 나타남

🔍 원인 분석

❗ Hydration 오류

Zustand의 상태는 CSR인 클라이언트 전용이기 때문에 SSR 시점에는 존재하지 않는다.

그런데 다음과 같이 CSR 기반 조건을 SSR에서 평가하게 되면, 서버와 클라이언트의 렌더링 결과가 달라져 mismatch 발생하게 된다.

const isLoggedIn = !!userInfo?.userName

<div onClick={() => {
  window.location.href = isLoggedIn ? '/main' : '/login'
}}

❗ 헤더 두 번 렌더링된 것처럼 보이는 이유