사내의 next.js + react로 되어있는 웹 프로젝트의 react 버전을 16에서 18로 올리고 로컬 모바일 디바이스에서 테스트를 하니 아래와 같은 에러가 터졌다.
text content does not match server-rendered html. 원인
렌더링된 HTML(SSR 등)이 업데이트 되지만, 페이지 로드 후 React 코드는 업데이트되지 않을 때 발생한다고 한다. next.js와 같은 프레임워크와 함께 ssr 사용할 때 React hydration을 사용하고 있기 때문에, hydration error의 일종이라고 볼 수 있다.
해결 방법
스택오버 플로우는 늘 정답을 알고 있다..
import React from "react";
export default function App() {
const [hydrated, setHydrated] = React.useState(false);
React.useEffect(() => {
setHydrated(true);
}, []);
if (!hydrated) {
// Returns null on first render, so the client and server match
return null;
}
return (
// 입력 코드~
)
}페이지 랜더링 후에 코드를 띄울 수 있도록 위와 같이 최상단 app단에서 설정해주면 해당 에러가 뜨는 걸 막을 수 있다.
[주의] 2023.04.12 기준 : 해당 설정을 해제해주었습니다. 이유는 네이버 맵을 사용하는 컴포넌트에서 hydration 에러가 발생하더라구요(naver is not definded..) 해결하진 못했고, 저 설정을 지우니 접속이 되어 설정을 해제해주었습니다(사실상 작동 자체에는 불편할 뿐 문제는 없기에..) 운영에서는 별 문제를 일으키지 않았지만 마음에 걸리는 에러인 건 마찬가지네요..
25% Speciallist