Вопросы React Frontend Developer

Hydration mismatch — это ошибка, возникающая, когда HTML, сгенерированный на сервере (SSR), не совпадает с тем, что React пытается отрисовать на клиенте при первой загрузке. React ожидает, что DOM будет идентичным, чтобы "гидратировать" его, добавляя обработчики событий. Основные причины: разное время или данные на сервере и клиенте, использование браузерных API (например, `window`) на сервере. Чтобы избежать, нужно синхронизировать данные, использовать `useEffect` для клиент-специфичного кода и библиотеки типа `next/dynamic` для ленивой загрузки компонентов.

ETag (Entity Tag) — это HTTP-заголовок, который содержит уникальный идентификатор версии ресурса. If-Match — условный заголовок, который отправляет серверу ETag для проверки, изменился ли ресурс. Они используются для кеширования (чтобы не загружать данные повторно) и для предотвращения конфликтов при одновременном редактировании (например, в REST API).

При серверном рендере нет доступа к localStorage и window, поэтому сервер отдаёт один HTML, а клиент при гидратации получает другой результат. React сравнивает разметку и находит расхождение, что вызывает ошибку hydration mismatch. Решение — читать браузерные данные в useEffect или после монтирования.

Ошибка гидрации возникает, когда HTML, отрендеренный на сервере, не совпадает с тем, что React рендерит на клиенте. Частые причины: Date.now(), Math.random(), обращение к window или localStorage прямо в рендере, разный формат локали. Решение — перенести такие вычисления в useEffect или использовать динамический импорт с ssr: false. Также помогает suppressHydrationWarning для осознанных расхождений.

При серверном рендеринге localStorage недоступен, поэтому сервер и клиент могут отрисовать разный HTML и React выдаст ошибку гидратации. Решение — рендерить нейтральный контент на сервере и первом клиентском рендере, а данные из localStorage подставлять после монтирования через useEffect и состояние. Так первый клиентский рендер совпадает с серверным, а обновление происходит уже после гидратации.