Почему возникает mismatch между серверным и клиентским рендером при чтении localStorage или window во время рендера?

В SSR-приложениях (Next.js, Remix, Nuxt) HTML формируется на сервере, где нет объектов window, localStorage или document. Если компонент во время рендера читает эти значения, сервер отдаёт разметку, основанную на заглушке или значении по умолчанию, а клиент при гидратации получает уже реальные данные из браузера. React сравнивает серверный HTML с тем, что рендерит клиент, и при несовпадении выбрасывает ошибку hydration mismatch.

Почему это происходит

• Сервер не знает о состоянии браузера: тема, токен, корзина в localStorage ему недоступны.
• Клиент при первом рендере уже видит эти данные и строит другую разметку.
• React ожидает, что первый клиентский рендер совпадёт с серверным HTML.

Пример проблемы

function Theme() {
  // На сервере window нет — упадёт или вернёт undefined
  const theme = localStorage.getItem('theme') || 'light';
  return <div className={theme}>Hello</div>;
}

Как исправить

1. Читать браузерные данные в useEffect после монтирования.
2. Использовать флаг isMounted или useState с начальным значением по умолчанию.
3. Для Next.js — динамический импорт с ssr: false или suppressHydrationWarning для точечных случаев.

function Theme() {
  const [theme, setTheme] = useState('light');
  useEffect(() => {
    setTheme(localStorage.getItem('theme') || 'light');
  }, []);
  return <div className={theme}>Hello</div>;
}

Итог: применяйте чтение браузерных API только после монтирования компонента, чтобы серверный и клиентский рендер совпадали и гидратация проходила без ошибок.