🐛 [Bug] 찜하기 hydration 에러 해결

[wynter24]

📄 문제상황

문제 상황: #339

문제 원인

Hydration이 완료되기 전에 React Query 또는 prefetchQuery에서 변경 전 캐시 데이터를 사용하면서 데이터 불일치가 발생함.

• prefetchQuery가 hydration 과정에서 최신 데이터를 적용하지 못했을 가능성
• React Query가 hydration 이전의 클라이언트 캐시 데이터를 우선 사용했을 가능성

➡️ 이로 인해 새로고침 후에도 찜하기 상태(isLiked: true)가 반영되지 않고, 기존 상태(isLiked: false)가 유지되면서 Hydration Error 발생.

✔️ 재현 가능 여부

• 예
• 아니오

💻 코드

해결 방법

useEffect로 Hydration 완료 여부를 감지하여 렌더링 지연

function BookClubMainPage() {
  const [isHydrated, setIsHydrated] = useState(false);

  useEffect(() => {
    setIsHydrated(true);
  }, []);

  return (
    {isLoading || isFetching || !isHydrated ? (
       <div className="flex h-[400px] justify-center">
         <Loading />
       </div>
     ) : (
       <div className="pb-12">
         <ClubListSection bookClubs={data} filter={filters} />
       </div>
     )}
  );
}

해결 원리

1. SSR 단계에서 데이터를 가져오지만, Hydration 완료 전까지는 렌더링하지 않음 (Loading 표시)
2. Hydration 완료 후 (useEffect 실행 후) 최신 데이터로 렌더링
3. 이로 인해 서버와 클라이언트의 상태 불일치 해소

React Query의 캐시가 완전히 복원된 후에 데이터를 사용하게 되어 hydration error를 방지할 수 있습니다.

🙋🏻 참고 자료

어쩔 수 없는 hydration mismatch를 useEffect없이 해결하기
useEffect | Hooks API Reference
hydrateRoot | React
Server Rendering & Hydration | TanStack Query React Docs