React-tooltipとNext.jsSSRの問題

Question

Next.jsアプリでreact-tooltipライブラリを使用しています。

ツールチップを使用するページにアクセスしているときにWebサイトを更新するたびに、次のエラーが発生することに気付きました。

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

同じ問題が発生しました。状態を使用してコンポーネントがマウントされたことを検出し、その後にのみツールチップを表示する必要がありました。

PSナビゲート時にページがサーバー上にレンダリングされないため、ナビゲート時にエラーは表示されません。すべてフロントエンドです:)