-
Prop `id` did not match. Server: "id-A" Client: "id-B"카테고리 없음 2023. 8. 27. 23:09
Next.js 기반 프로젝트에서 외부 라이브러리를 설치한 컴포넌트를 로드하는데, 아래와 같은 에러가 떴다.
알아보니, 서버에서는 앞의 id 를 사용했지만, 클라이언트에 그려질 때는 뒤의 id 를 사용했다는 것 같았다.
그래서 크롬 개발자 도구에서 id 를 확인해봤다.
크롬 개발자 도구 브라우저는 클라이언트로 알고 있었는데, 서버측의 id 를 보여주고 있는게 조금 이상했다. 이 부분은 나중에 좀 더 공부해보자.
아무튼,
Next.js 의 렌더링 방식이 클라이언트 사이드 렌더링과 서버 사이드 렌더링으로 나뉘어있어서 생기는 문제라고 가설을 세웠다.
가설을 검증하기 전에, 우선 같은 에러를 마주한 사람이 있을 것 같아서 에러를 그대로 구글에 검색해봤다.
검색 결과, 내가 세운 가설과 비슷한 답변을 한 사람이 있었다. 요약하면,
Next.js 에서는 코드를 서버 사이드에서 생성하기 때문에, 클라이언트 사이드에서 리렌더링이 일어날 경우 이런 에러가 발생할 수 있습니다.
서버에서 생성한 코드를 클라이언트에서 수정하면 뭐가 문제가 되길래 이런 에러를 주는지 궁금해졌다. 나중에 좀 더 공부해보자.
아무튼,
그래서 생각한 해결책으로는 라이브러리를 사용하는 컴포넌트가 Next.js 의 서버 사이드 렌더링 대신 클라이언트 사이드 렌더링을 사용하게 하면 해결할 수 있지 않을까 싶었다.
Next.js 에서 ssr 을 사용하지 않고 동적으로 컴포넌트를 불러오는 방법을 알려줘서, 그대로 적용해서 해결했다.
// import HtmlEditor from "src/components/HtmlEditor"; const HtmlEditor = dynamic(() => import("src/components/HtmlEditor"), {ssr: false});
참고자료