Next.js 하이브리드 렌더링 환경에서의 서버-클라이언트 상태 불일치 해결 전략

핵심 기술

이 콘텐츠는 Next.js의 하이브리드 렌더링 환경(SSR, CSR)에서 app/ 디렉토리 기반의 서버 컴포넌트와 클라이언트 컴포넌트 간 상태 불일치로 발생하는 헤더 깜빡임 문제를 집중적으로 다룹니다. Zustand와 같은 클라이언트 상태 관리 라이브러리를 SSR 환경에 통합할 때의 도전 과제와 이를 해결하기 위한 실질적인 접근법을 공유합니다.

기술적 세부사항

• 문제 정의: Next.js SSR 환경에서 로그인 상태가 초기 로딩 시 비로그인 상태로 잠시 깜빡이는 현상 발생.
• 문제 원인: 서버 컴포넌트에서 상태를 알지 못한 채 렌더링된 후, 클라이언트 컴포넌트에서 Zustand 상태가 Hydration되기 전까지의 상태 불일치.
• 초기 해결 시도 (실패):
  • "use client" 컴포넌트 내 useEffect를 사용하여 클라이언트에서 Zustand 상태 동기화 시도.
  • 결과: 서버 렌더링 시 상태를 알지 못해 여전히 깜빡임 발생.
• 개선된 해결 시도 (SSR 단계에서 props 전달):
  • layout.tsx에서 async 함수를 사용하여 서버에서 세션 정보를 미리 가져옴.
  • 가져온 세션 정보를 Header 컴포넌트에 props로 전달하여 SSR 시에도 로그인 상태 반영.
  • 결과: 깜빡임 문제는 해결되었으나, 실제 배포 환경에서 다중 사용자 세션 꼬임 문제 발생.
• 근본적인 해결책 (쿠키 기반 상태 판단):
  • layout.tsx에서 Next.js의 cookies() API를 사용하여 인증 쿠키(sid) 존재 여부만 확인.
  • isLoggedIn과 같은 최소한의 정보만 Header 컴포넌트에 props로 전달.
  • 클라이언트 측 Zustand는 skipHydration: true 옵션 또는 서버 초기화 방지 설정을 통해 독립적으로 Hydration되도록 함.
• 기술 스택: Next.js (App Router), Zustand, Axios.

개발 임팩트

• UI/UX 개선: 헤더 깜빡임 현상 제거를 통해 사용자 경험 향상.
• 안정성 확보: 다중 사용자 환경에서의 세션 꼬임 위험을 줄이고, 서버 부하 감소 및 응답 지연 방지.
• Next.js 이해 증진: Next.js의 하이브리드 렌더링 특성, 서버 컴포넌트와 클라이언트 컴포넌트의 역할 분담, Hydration 과정에 대한 실질적인 이해 증진.

커뮤니티 반응

원문에서 커뮤니티 반응에 대한 구체적인 언급은 없으나, 제시된 해결 과정은 Next.js 커뮤니티에서 흔히 논의되는 SSR과 상태 관리 통합 문제에 대한 실제적인 경험과 솔루션을 담고 있어 공감을 얻을 것으로 예상됩니다.