Что такое гидрация в React/Next.js и что происходит при hydration mismatch?

Гидрация связывает React с уже выданным сервером HTML. Hydration mismatch означает, что первый клиентский результат не совпал с серверной разметкой.

Причины включают случайные значения, дату, различие данных, browser-only ветвление и неверную HTML-вложенность. React может сообщить об ошибке и восстановить часть дерева клиентским рендерингом; нельзя рассчитывать на исправление всех атрибутов. Добивайтесь одинакового первого результата, а клиентские различия переносите на последующий этап.

Источник: react.dev.