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

Question

[NikolaiD]

Начал изучать Next js, пишу регистрацию - логинизацию пользователя, при рендере по условию, когда есть токин и появляєтся кнопка Logout после логинизации получаю 3 ошибки:
Error: Text content does not match server-rendered HTML.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
Решиния описание в доках не применими, проблема не та.
Може кто помочь?

import Link from "next/link";
import { connect } from "react-redux";
import { logOut } from "../redux/auth/authActions";

export const siteTitle = "Auth";

function Navigation({ isAuth, logOut }) {
  return (
    <div className={styles.container}>
      <header className={styles.header}>
        <nav>
          {isAuth ? (
            <Link href="/">
              <button type="button" onClick={logOut}>
                Logout
              </button>
            </Link>
          ) : (
            <>
              <Link href="singup">
                <button type="button">Signup</button>
              </Link>

              <Link href="login">
                <button type="button">Login</button>
              </Link>
            </>
          )}
        </nav>
      </header>
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    isAuth: state.auth.idToken,
  };
};

export default connect(mapStateToProps, { logOut })(Navigation);

Comments

[Вадим]

А сервер знает что пользователь isAuth? Или это на клиенте определяется? Если на клиенте. то вот и ответ.

[NikolaiD]

Вадим, Спасибо за ответ, но я что-то ничего не понял (((
Как серверу об этом "сказать"? Я использую firebase

[Вадим]

NikolaiD,

но я что-то ничего не понял

Окей, давайте по пунктам:
- У вас проблема не совпадения рендеринга на сервере и на клиенте.
- Такая проблема возникает чаще всего по 2м причинам: 1) Используется v-if; 2) на клиенте пропущены не обязательные тэги (например, thead и tbody для таблицы, на сервере они автоматом прописываются - на клиенте браузером)
- Судя по предоставленной разметке у Вас первый случай с v-if.
- Проблема с ошибкой гидратации(знаете же что такое гидратация? если нет, надо идти гуглить, это важно знать) при v-if возникает тогда, когда на сервере условие, которое внутри v-if, не совпадает с клиентом. Например, на сервере false, а на клиенте true.

Суммируем всё вышесказанное: у вас на серверном рендеринге isAuth имеет такое же значение как на клиенте? Или при монтировании приложения эта переменная изменяется на основе данных, которые хранятся на клиенте? Например, берётся значение из local storag и пушится в state?

[NikolaiD]

Вадим,
Да, берётся значение из local storag и пушится в state, именно так.
Гидратации как я понял это метод который позволяет сделать предварительный рендеринг контента на сервере, но как я понял от касается запросов и получением информации которую нужно отрисовать, но я же запрос никакой не делаю, а использую те которые уже есть.
Подскажите как исправить

[Вадим]

NikolaiD, Если грубо говоря, то при серверном рендеринге разметка приходит с сервера. Она не рективно, то есть просто HTML.
Гидратация это процесс мержа разметки с клиентской реактивностью. Чтобы дальше работать как SPA.
И когда фрэймворк видит что пришедшая разметка с сервера не совпадает с той, которая должна была отрисоваться на клиенте, выдаёт ошибку гидратации.

Чтобы исправить любую ошибку гидратации есть 2 основных пути:
1) Синхронизировать разметку между сервером и клиентом. В вашем случае уйти от проверки локал стоража. Тут в комментах всего не опишешь. Гуглите.
2) Сделать рендеринг блока client-side only. Тоже гуглите под ваш конкретный стек. Если даже библиотечки хелперы под это.

[NikolaiD]

Вадим, Спасибо, буду гуглить