"A hidratação falhou porque o HTML renderizado pelo servidor não correspondeu ao cliente...."

Se você usa Next.js para criar aplicativos, deve ter recebido o erro acima ou algo semelhante. É chamado de erro de hidratação.

Eu costumava receber esse erro quando comecei com Next.js, mas não sabia o que fazer e nunca me importei em procurá-lo porque não estava realmente afetando meu código na época. Só quando um entrevistador me perguntou o que eu faria para resolver um erro de hidratação no Next.js. Fiquei pasmo porque agora não era o caso do entrevistador tentando me derrubar, mas sim um caso de indiferença e pura ignorância. Não quero que você seja como eu em sua próxima entrevista. Então vamos discutir sobre Hidratação.

Hidratação é o processo em que o HTML estático se torna interativo ao adicionar Javascript a ele. Normalmente, quando uma página da Web é renderizada no servidor, ela perde sua interatividade e seus manipuladores de eventos antes de chegar ao cliente. React é responsável por construir a árvore de componentes no cliente. Isso é chamado de hidratação, porque adiciona a interatividade e os manipuladores de eventos que foram perdidos quando o HTML foi renderizado no servidor. O React o compara com o DOM renderizado no lado do servidor real. Eles devem ser iguais para que o React possa adotá-los.

Se houver uma incompatibilidade entre a página que temos e o que o lado do cliente acha que deveríamos ter, obteremos um "Erro de hidratação". Algumas causas comuns de erros de hidratação incluem: aninhamento incorreto de elementos HTML, dados diferentes usados ​​para renderização, uso de APIs somente para navegador, efeitos colaterais, etc.

Seja qual for a causa, você terá que descobrir lendo a mensagem de erro que recebe. As possíveis soluções incluem;

1. Usando useEffect para executar apenas no cliente.
Para evitar uma incompatibilidade de hidratação, certifique-se de que o componente renderize o mesmo conteúdo no lado do servidor e na renderização inicial do lado do cliente. Você pode usar o gancho useEffect para renderizar conteúdo intencionalmente no cliente. Veja exemplo abaixo:

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. Desativando a renderização do lado do servidor em componentes específicos.
Você pode usar o recurso de desabilitação de pré-renderização em Next.js em componentes específicos. Isso pode evitar incompatibilidades de hidratação. Veja exemplo abaixo:

import dynamic from 'next/dynamic'

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

export default function Page() {
  return (
    

      
    
  )
}

3. Usando o aviso de supressão de hidratação
Há momentos em que o conteúdo será inevitavelmente diferente no servidor e no cliente, como o carimbo de data/hora. O que você pode fazer é silenciar o aviso de incompatibilidade de hidratação adicionando suprimHydrationWarning={true} ao elemento.

Portanto, com esses três métodos, você poderá resolver esse erro de hidratação na próxima vez que ele aparecer ao construir em Next.js.

Não se esqueça de se inscrever na minha página para obter mais conteúdo revelador sobre programação.