[React.js] Warning: Expected server HTML to contain a matching <div> in <div>.

문제 상황

export default function ExComponent() {
    const items = window.localStorage.getItem('items');
    return ...
}

Next.js에서 SSR(Server Side Rendering)을 사용한다면 위와 같은 코드 이용 시 아래와 같은 오류가 발생할 수 있다.

 

Warning: Expected server HTML to contain a matching <div> in <div>.

 

해결 방법

 첫 번째 렌더링이 서버의 초기 렌더와 일치해야하기 때문에, 브라우저에서만 실행되어야하는 코드는 useEffect 코드 내부에서 실행되어야 한다. window 객체는 클라이언트 측에서 브라우저의 요소들과 자바스크립트 엔진들을 담고 있는 객체이기 때문에 useEffect 코드 내부에 존재하거나 @next/dynamic을 통한 lazy loading을 이용하는 해결하는 방법이 있다.

 

---

Reference

Warning: Expected server HTML to contain a matching <div> in <div>. · Discussion #17443 · vercel/next.js