Что такое гидратация и какие с ней бывают проблемы?
- Что такое hydration mismatch?
- Что такое островная архитектура?
После SSR браузер получает готовый HTML, но он «мёртвый»: гидратация — фреймворк загружает JS, повторно строит дерево компонентов и привязывает обработчики к существующей разметке. Проблемы: страница выглядит готовой, но не реагирует, пока JS не загрузился (плохой INP); несовпадение серверного и клиентского рендера (hydration mismatch) — из-за дат, случайных значений, обращения к window при рендере; стоимость JS для всей страницы. Решения: частичная и ленивая гидратация, острова (Astro — интерактивны только отдельные части), серверные компоненты (React Server Components) без JS на клиенте.
- Код, зависящий от браузера, — в эффектах, а не в рендере
- Даты и локаль — одинаковые на сервере и клиенте
- Меньше клиентских компонентов — меньше гидратации
Подробно
Пример mismatch: компонент выводит new Date().toLocaleTimeString() — сервер и браузер покажут разное время, фреймворк выдаст предупреждение и перерисует часть страницы.
Что хотят услышать
- Что делает гидратация.
- Задержка интерактивности и mismatch.
- Острова, частичная гидратация, серверные компоненты.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Гидратация — сжатие изображений на сервере
- ✗После SSR JavaScript на клиенте никогда не нужен, страница интерактивна сразу
- ✗Обращение к window при рендере на сервере безопасно и не вызывает расхождений с клиентом
- ✓Привязка JS к серверному HTML; риски — поздняя интерактивность и несовпадение рендеров
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.