Text content does not match server-rendered HTML

소밍·2023년 5월 30일
0
post-thumbnail

► 내가 마주한 에러들

Error: "Text content does not match server-rendered HTML"
Warning: Text content did not match. Server: "0" Client: "1"

서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 HTML의 텍스트 내용이 일치하지 않을 때 발생하는 에러. 일반적으로 서버에서 렌더링된 컨텐츠와 클라이언트에서 동적으로 변경된 컨텐츠가 일치하지 않을 때 발생할 수 있다.


"Hydration failed because the initial UI does not match what was rendered on the server"

초기 UI(사전 렌더링된 HTML)가 서버에서 렌더링된 결과와 일치하지 않아 클라이언트 측에서의 재렌더링에 실패한 경우 발생.
즉, 서버에서 렌더링된 HTML과 클라이언트에서의 렌더링 결과가 일치하지 않을 때 발생.


"There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering"

서버 사이드 렌더링 중에 오류가 발생하여 클라이언트 측에서의 렌더링으로 전환해야 함을 나타낸다. Suspense 경계 내에서 오류가 발생하지 않았으므로 전체 애플리케이션을 클라이언트 측 렌더링으로 전환해야 한다.

이러한 오류는 보통 서버에서 렌더링된 HTML과 클라이언트에서의 렌더링 결과가 일치하지 않을 때 발생한다. 주로 초기 상태, 데이터 불일치, 클라이언트 측 렌더링 시점의 변경 등이 원인이 될 수 있다. 오류를 해결하기 위해서는 서버와 클라이언트 간의 데이터 일치성을 확인하고, 초기 렌더링 시점에서의 데이터를 정확하게 처리해야 한다.


► 서버 사이드 렌더링은 로컬 스토리지에 접근할 수 없다 !

나의 경우엔 리코일을 이용하여 투두리스트를 구현하는 과정에서 recoil-persist를 이용하여 로컬스토리지에 아이템을 저장, 삭제하고자 했고 기능은 구현 되었으나 페이지를 새로고침할 경우 해당 에러가 발생했다.

로컬스토리지에 아이템을 저장하고 있는데 페이지를 새로고침할 경우 리랜더링이 일어나면서 서버측에서는 아이템이 하나도 없지만 클라이언트 측에는 여전히 내가 작성한 아이템이 있는 것이 문제였다.

데이터 로딩 전에 로컬 스토리지에 저장한 데이터를 가져와서 프리렌더링 하면 되지 않을까? 라고 생각했지만 아래와 같은 에러가 발생했다.

localStorage is not defined

서버 사이드 렌더링은 서버 환경에서 실행되기 때문에 브라우저 환경에서만 존재하는 window 객체에 접근할 수 없다. 로컬스토리지도 window 객체의 일부이기 때문에 서버사이드 렌더링 중에는 로컬 스토리지에 접근할 수 없었고 때문에 에러가 발생한 것.

todo 컴포넌트만 클라이언트 사이드 렌더링 처리하여 에러를 해결했다.

profile
생각이 길면 용기는 사라진다.

0개의 댓글

관련 채용 정보