Проверяет понимание причин и последствий несоответствия гидрации в SSR-приложениях, что важно для диагностики ошибок рендеринга.
При серверном рендеринге (SSR) React генерирует HTML на сервере и отправляет его клиенту. Затем на клиенте React «оживляет» этот HTML, прикрепляя обработчики событий и создавая виртуальное дерево. Если разметка, созданная на сервере, не совпадает с тем, что React ожидает при первом рендере на клиенте, возникает ошибка гидрации — hydration mismatch.
Основные причины — использование нестабильных данных, которые могут отличаться между сервером и клиентом. Например, вызов Date.now() или Math.random() даст разные значения. Также различия в часовых поясах, локали, или использование браузерных API, недоступных на сервере (например, window или document), приводят к расхождениям. Другая частая причина — условный рендеринг, зависящий от состояния, которое инициализируется по-разному на сервере и клиенте.
function App() {
const [time, setTime] = React.useState(new Date().toISOString());
return <div>{time}</div>;
}
// Сервер: время = 2025-01-01T00:00:00Z
// Клиент: время = 2025-01-01T00:00:01Z (разница в секундах)
// Возникает mismatchИспользуйте стабильные данные, которые одинаковы на сервере и клиенте. Для случайных или временных значений применяйте отложенный рендеринг после гидрации, например, с помощью useEffect. Проверяйте окружение через typeof window !== 'undefined' и избегайте прямого доступа к браузерным API во время рендера. Также можно использовать библиотеки для синхронизации состояния, такие как Redux с серверным стором.
Hydration mismatch — распространённая проблема в SSR-приложениях, которую важно понимать для создания надёжных и быстрых интерфейсов. Применяйте стабильные данные и отложенную инициализацию, чтобы избежать ошибок и обеспечить плавную гидрацию.
