서론
리액트 쿼리에 Provider를 주입하다가 이슈가 생겼다. 바로 하이드레이션 에러..
저기 https://.. 로 되어 있는 링크를 누르면 다음과 같은 공식문서가 뜬다. 공식문서를 크롬 확장프로그램을 사용해서 한글로 번역했다. (DeepL 이란 녀석을 깔고 드래그 하면 구글번역보다 좀 더 매끄러운 번역을 해준다. - 전도해주신(??) 안동훈 튜터님 캄사다!!)
Text content does not match server-rendered HTML
(텍스트 콘텐츠가 서버에서 렌더링된 HTML과 일치하지 않음)
이 오류가 발생한 이유
- 애플리케이션을 렌더링하는 동안 서버에서 미리 렌더링된 React 트리와 브라우저에서 처음 렌더링되는 동안 렌더링된 React 트리 간에 차이가 발생했습니다(하이드레이션).
- 하이드레이션은 React가 이벤트 핸들러를 첨부하여 서버에서 미리 렌더링된 HTML을 완전한 인터랙티브 애플리케이션으로 변환하는 것을 말합니다.
일반적인 원인
하이드레이션 오류는 다음에서 발생할 수 있습니다:
- HTML 태그의 잘못된 중첩
다른<p>태그 안에 중첩된<p><div>가<p>태그 안에 중첩된 경우<ul>또는<ol>이<p>태그 안에 중첩된 경우 대화형 콘텐츠는 중첩할 수 없습니다(<a>태그에 중첩된<a>,<button>태그에 중첩된<button>등) - 렌더링 로직에 typeof window !== '정의되지 않음'과 같은 검사 사용
- 렌더링 로직에서 window 또는 localStorage와 같은 브라우저 전용 API 사용
- 브라우저 확장 프로그램이 HTML을 수정하는 경우
- 잘못 구성된 CSS-in-JS 라이브러리
- 코드가 공식 예시를 따르고 있는지 확인
- Cloudflare 자동 축소와 같이 html 응답을 수정하려고 시도하는 잘못 구성된 Edge/CDN
처음 주입한 프로바이더
처음에는 providers라는 폴더에 default와 feature를 나눈 곳에 각각 주입 시켜 놨는데, (기능에 따라서 헤더 레이아웃이 다르게 나오도록 구현했기 때문)
queryClient.invalidateQueries가 안됨
버튼을 누르고 나서 작업 하는 함수가 실행된 후에 성공됐다면 무효화 처리하고 리패치 받아온 리액트 쿼리 데이터가 떠야 하는데 데브툴스를 확인해도 안뜨고 새로고침을 해야만 상태값이 반영되는 이슈가 있었다.
app에 주입한 프로바이더
다시 수정해서 가장 상위 폴더인 app에 layout에 html과 body사이에 provider를 주입했더니 Hydration 에러가 떠서
공식 문서에서 찾아보고 body안에 프로바이더로 감싸고 있어서 맞게 고쳐주었더니 에러는 사라졌다. 원인은 서버에서 내려주는 ssr과 csr에 미리 렌더링 작업된 html이 안맞아서 그랬던 건데..이게 위치가 잘못 쓰여져서 에러가 났던게 맞았는지에 대한 정확한 이유는 한번 더 확인이 필요할 것 같다 ;ㅅ;
참고문서
[리액트 쿼리 사용법 v5 기준]
https://nextjs.org/docs/messages/react-hydration-error
[하이드레이션 에러] https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#experimental-streaming-without-prefetching-in-nextjs
