React-tooltip e problema SSR Next.js

Question

Uso la libreria dei suggerimenti di reazione nella mia app Next.js.

Ho notato che ogni volta che aggiorno un sito web mentre visito una pagina che utilizza il tooltip ricevo un errore:

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

Le classi CSS sono diverse sul client e sul server

La parte strana è che non ricevo quell'errore durante la navigazione da una pagina casuale a una pagina che utilizza il suggerimento di reazione.

Il codice relativo al 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

Ho avuto lo stesso problema, ho dovuto usare lo stato per rilevare quando il componente è stato montato e mostrare il suggerimento solo dopo.

PS Non vedi l'errore durante la navigazione, perché la pagina non viene visualizzata sul server durante la navigazione, è tutto front-end :)