React-tooltip 및 Next.js SSR 문제

Question

Next.js 앱에서 react-tooltip 라이브러리를 사용합니다.

도구 설명을 사용하는 페이지를 방문하는 동안 웹 사이트를 새로 고칠 때마다 오류가 발생한다는 것을 알았습니다.

react-dom.development.js:88 Warning: Prop `dangerouslySetInnerHTML` did not match.

CSS 클래스는 클라이언트와 서버에서 다릅니다.

이상한 부분은 임의의 페이지에서 react-tooltip을 사용하는 페이지로 이동하는 동안 오류가 발생하지 않는다는 것입니다.

툴팁 관련 코드 :

<StyledPopularityTooltipIcon src="/icons/tooltip.svg" alt="question mark" data-tip="hello world" />
<ReactTooltip
    effect="solid"
    className="tooltip"
    backgroundColor="#F0F0F0"
    arrowColor="#F0F0F0"
    clickable={true}
/>

Answer 1

동일한 문제가 발생하여 상태를 사용하여 구성 요소가 마운트 된시기를 감지하고 그 이후에만 툴팁을 표시해야했습니다.

추신 : 탐색 할 때 페이지가 서버에서 렌더링되지 않기 때문에 탐색 할 때 오류가 표시되지 않으며 모두 프런트 엔드입니다 :)