React-tooltip и проблема с SSR Next.js

Question

Я использую библиотеку react-tooltip в моем приложении Next.js.

Я заметил, что каждый раз, когда я обновляю веб-сайт при посещении страницы, использующей всплывающую подсказку, я получаю сообщение об ошибке:

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

Классы CSS различаются на клиенте и на сервере.

Странно то, что я не получаю эту ошибку при переходе со случайной страницы на страницу, которая использует всплывающую подсказку.

Код, связанный с подсказкой:

<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 Вы не видите ошибки при навигации, потому что страница не отображается на сервере при навигации, это все интерфейс :)