🐛 [Bug] 찜하기 hydration 에러

[wynter24]

📄 문제상황

찜하기 후 새로고침 시 찜하기 전 UI로 변경되고 aria-label, aria-pressed, fill, className 등의 속성이 SSR과 클라이언트에서 다르게 렌더링되는 hydration error 발생

에러 발생 과정

1. 찜하기 버튼 클릭 → 낙관적 업데이트 발생
   • isLiked: false → true로 즉시 변경됨 (클라이언트 UI 반영됨).
   • 동시에 백엔드에 API 요청을 보냄.
2. 새로고침 발생
   • SSR이 실행되며 서버에서 prefetchQuery로 데이터를 가져옴.
   • 클라이언트는 서버에서 렌더링된 HTML을 기반으로 Hydration 진행.
3. Hydration 과정에서 불일치 발생
   • 클라이언트가 hydration을 완료하기 전에 기존 캐시 데이터를 사용하여 변경 전 UI가 렌더링됨
   • 이로 인해 찜하기 후 변경된 데이터(isLiked: true)가 아닌 기존 값(isLiked: false)이 유지되면서 Hydration Error 발생

✔️ 재현 가능 여부

• 예
• 아니오

💻 코드

No response

🙋🏻 참고 자료

No response