@MRcracker

Ошибка Error: Hydration failed because the initial UI does not match what was rendered on the server. Как исправить?

Получаю ошибку. Заметил, что она возникает при использовании библиотеки useMediaQuery. Как ее исправить можно? Если заменить библиотеку, то посоветуйте на что.
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
Очевидная проблема в том, что ты рендеришь страницу по разному в зависимости от свойств экрана юзера, однако сервер не знает ничего об юзерском экране, потому результат SSR и результат на клиенте - разный, что и вызывает ошибки гидрации.

Красивого решения тут нет, только разные костыли, например:
1. Первый раз рендерить компонент всегда одинаково, а потом уже обновлять по useEffect в зависимости от экрана. Простое решение которое сразу заработает, однако может привести к кратковременном миганию на клиенте при загрузке.
1а. Вычислять по userAgent что у клиента мобила\планшет и первым рисовать наиболее вероятный вариант, а потом уже по useEffect использовать точный, если не угадали. Тоже самое но есть шанс что угадаем.
2. Рисовать все варианты на странице, а скрывать тупо классами css не используя этой либы. Тоже сразу заработает, но на странице куча мусора.
3. ?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы