Что такое SSR и гидратация и откуда берутся ошибки гидратации?
- Hydration mismatch — что это?
SSR: сервер рендерит компоненты в HTML — пользователь сразу видит содержимое, поисковики его индексируют. Затем в браузере React гидратирует: загружает JS, сопоставляет его с готовым HTML и навешивает обработчики — до этого страница видна, но не интерактивна. Ошибка гидратации — HTML с сервера отличается от первого рендера на клиенте: Date.now(), Math.random(), window, localStorage, локаль форматирования, невалидная вложенность тегов (div в p). Лечение — одинаковый первый рендер, браузерные значения — в useEffect после монтирования.
- Стриминг SSR с Suspense отдаёт HTML частями
- Тяжёлый JS — долгая гидратация, страница «не нажимается»
- suppressHydrationWarning — только для точечных случаев вроде времени
А ещё Серверные компоненты уменьшают объём гидратации
Подробно
function Clock() {
const [now, setNow] = useState<Date | null>(null);
useEffect(() => setNow(new Date()), []);
return <span>{now ? now.toLocaleTimeString() : "—"}</span>;
}Что хотят услышать
- SSR даёт HTML сразу.
- Гидратация навешивает интерактивность.
- Причины рассинхронизации и лечение.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Гидратация — это загрузка данных с сервера в useEffect после первого рендера
- ✓SSR отдаёт готовый HTML, гидратация вешает обработчики; ошибка — если клиентский рендер другой
- ✗Использовать window при рендере на сервере безопасно
- ✗До гидратации страница уже полностью интерактивна, обработчики работают сразу после HTML
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.