Next.js + Zustand: Hydration 문제 해결하기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Next.js 및 Zustand를 사용하는 개발자, SSR/SSG 환경에서 상태 관리에 어려움을 겪는 프론트엔드 개발자

핵심 요약

• Hydration 문제의 원인: 서버와 클라이언트 간 상태 불일치로 인한 UI 깜빡임 발생
• 정확한 해결 방법: cookies().has("sid")로 로그인 상태 확인 후 skipHydration: true 설정으로 Zustand 초기화 방지
• 핵심 원칙: Next.js는 SSR만이 아닌 하이브리드 프레임워크로, 서버에서 세션 판단은 위험하며 클라이언트 상태 관리가 안전

섹션별 세부 요약

1. 문제 발생 현상

• 로그인 상태에서 새로고침 시 헤더 깜빡임
• SSR 동작 과정에서 서버와 클라이언트 상태 불일치
• CSR 환경에서는 문제가 없음

2. 초기 시도: `SessionHydration` 컴포넌트

• getSession() API 호출로 상태 동기화 시도
• 결과: 서버에서 세션 불일치로 인한 깜빡임 해결되지 않음
• 문제점: layout.tsx에서 API 호출로 다중 사용자 환경에서 세션 꼬임 위험 발생

3. 정확한 해결 방법

• cookies().has("sid")로 로그인 상태 확인
• skipHydration: true 설정으로 Zustand 초기화 방지
• 서버에서 세션 판단 대신 클라이언트에서 쿠키 기반 판단

4. 핵심 원칙 정리

• Next.js는 CSR, SSR, SSG 혼합 가능한 하이브리드 프레임워크
• 서버에서의 세션 판단은 다중 사용자 환경에서 안전하지 않음
• Zustand의 skipHydration 옵션을 사용해 SSR/SSG 환경에서의 초기화 방지

결론

• Hydration 문제 해결의 핵심: cookies().has("sid")로 로그인 상태 확인 후 Zustand의 skipHydration: true 설정 적용
• 실무 권장사항: 서버에서 세션 판단은 피하고, 클라이언트에서 쿠키 기반 로그인 상태 관리
• 추가 참고: Next.js App Router 문서 및 Zustand SSR/Hydration 공식 가이드 참조