[문제 기록] NEXT.JS(SSR) Error: Text content does not match server-rendered HTML.

문제 상황

프로젝트 진행 중, 팀원이 들어간 팀 페이지에서 새로고침을 할 경우, 페이지의 데이터들이 사라졌다.

해당 데이터들을 유지하고자, Zustand의 Persist를 이용해 Storage에 저장을 해주고 테스를 해보니 아래와 같은 에러가 발생하였다.

원인 분석

해당 에러코드는 SSR에서 나타나는 문제로, 서버 측의 렌더링된 결과와 브라우저에서 렌더링된 결과가 달라서, 생기는 문제이다.

todoTableData는 zustand의 Persist로 생성한 저장소인데, 코드 상에서는 아래와 같은 부분에서 "?"이 문제를 발생시킨다.

해결

Zustand Persist된 데이터들은 HTML에서 ? 연사자(삼항 연산자) 혹은 && 연산자를 이용하지말고, 아래와 같이 데이터를 먼저 체크 후, 리턴해 준다.

만약, 해당 Persist된 데이터를 상속받는 컴포넌트들이 있을 경우, 해당 컴포넌트들 내부도 확인 후 변경해주어야 한다.

왜 Zustand의 persist를 이용할 때만 일어날까?

위와 같이 persist를 사용하지 않았을 때는 잘 작동되었지만,

 이처럼 Persist를 사용했을 때 해당 문제가 발생하였다. 해당 원인이 궁금해 Zustand의 문서를 찾아보았는데, 아래와 같은 내용을 발견했다.

https://docs.pmnd.rs/zustand/integrations/persisting-store-data

영어 원문

번역문

위 변역문에서 번역된 수화는 Hyration(서버측의 렌더링 결과와 클라이언트의 렌더링을 비교하는 과정)을 말한다. 

즉, 해당 컴포넌트의 렌더링에 사용되는 persist 저장소들은 동기화하는데 약간의 시간이 걸리기 때문에, 모두 불러온 후에  렌더링 시켜야 한다.

 

# 잘못된 내용이 있을 경우, 댓글 부탁드립니다.