"Гидратация не удалась, поскольку HTML-код, обработанный сервером, не соответствует клиентскому...."

Если вы использовали Next.js для создания приложений, вы, должно быть, получили указанную выше ошибку или что-то подобное. Это называется «Ошибка гидратации».

Раньше я получал эту ошибку, когда впервые начал работать с Next.js, но не знал, что делать, и никогда не хотел ее искать, потому что в то время она особо не влияла на мой код. Пока интервьюер не спросил меня, что бы я сделал, чтобы устранить ошибку гидратации в Next.js. Я был ошеломлен, потому что теперь дело было не в том, что интервьюер пытался меня сбить с толку, а в случае беспечности и полнейшего невежества. Я не хочу, чтобы в следующем интервью вы были похожи на меня. Итак, давайте обсудим гидратацию.

Гидратация — это процесс, при котором статический HTML становится интерактивным за счет добавления к нему Javascript. Обычно, когда веб-страница отображается на сервере, она теряет интерактивность и обработчики событий, прежде чем попасть к клиенту. React отвечает за построение дерева компонентов на клиенте. Это называется гидратацией, поскольку добавляется интерактивность и обработчики событий, которые были потеряны при рендеринге HTML на стороне сервера. React сравнивает его с фактическим DOM, отображаемым на стороне сервера. Они должны быть одинаковыми, чтобы React мог их принять.

Если между имеющейся у нас страницей и тем, что, по мнению клиентской стороны, должно быть, есть несоответствие, мы получаем «Ошибку гидратации». Некоторые распространенные причины ошибок гидратации включают в себя: неправильное вложение HTML-элементов, разные данные, используемые для рендеринга, использование API-интерфейсов только для браузера, побочные эффекты и т. д.

Какова бы ни была причина, вам придется ее выяснить, прочитав полученное сообщение об ошибке. Возможные решения включают:

1. Использование useEffect только для запуска на клиенте.
Чтобы предотвратить несоответствие гидратации, убедитесь, что компонент отображает на стороне сервера тот же контент, что и при первоначальном рендеринге на стороне клиента. Вы можете использовать хук useEffect для намеренного рендеринга контента на клиенте. См. пример ниже:

import { useState, useEffect } from 'react'

export default function App() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return 
{isClient ? 'This is never prerendered' : 'Prerendered'}
}

2. Отключение рендеринга на стороне сервера для определенных компонентов.
Вы можете использовать функцию отключения предварительной визуализации в Next.js для определенных компонентов. Это может предотвратить несоответствие гидратации. См. пример ниже:

import dynamic from 'next/dynamic'

const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })

export default function Page() {
  return (
    

      
    
  )
}

3. Использование предупреждения о подавлении гидратации
Бывают случаи, когда содержимое неизбежно будет отличаться на сервере и клиенте, например временная метка. Что вы можете сделать, так это отключить предупреждение о несоответствии гидратации, добавив к элементу submitHydrationWarning={true}.

Итак, с помощью этих трех методов вы сможете устранить эту ошибку гидратации в следующий раз, когда она появится при разработке на Next.js.

Не забудьте подписаться на мою страницу, чтобы получать больше интересного контента о программировании.