React-Tooltip und Next.js SSR-Problem

Question

Ich verwende die React-Tooltip-Bibliothek in meiner Next.js-App.

Ich habe festgestellt, dass jedes Mal, wenn ich eine Website aktualisiere, während ich eine Seite besuche, die den Tooltip verwendet, eine Fehlermeldung angezeigt wird:

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

CSS-Klassen unterscheiden sich auf dem Client und auf dem Server

Der seltsame Teil ist, dass ich diesen Fehler nicht bekomme, wenn ich von einer zufälligen Seite zu einer Seite navigiere, die den React-Tooltip verwendet.

Der Tooltip-bezogene Code:

<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

Ich hatte das gleiche Problem. Ich musste den Status verwenden, um zu erkennen, wann eine Komponente bereitgestellt wurde, und den Tooltip erst danach anzeigen.

PS Sie sehen den Fehler beim Navigieren nicht, da die Seite beim Navigieren nicht auf dem Server gerendert wird, sondern nur im Front-End :)