"La hidratación falló porque el HTML renderizado por el servidor no coincidía con el cliente...."

Si ha estado usando Next.js para crear aplicaciones, debe haber recibido el error anterior o algo similar. Se llama error de hidratación.

Solía ​​recibir este error cuando comencé con Next.js, pero no sabía qué hacer y nunca me importó buscarlo porque realmente no estaba afectando mi código en ese momento. No hasta que un entrevistador me preguntó qué haría para resolver un error de hidratación en Next.js. Me quedé estupefacto porque ahora no se trataba de que el entrevistador intentara derribarme, sino de un caso de indiferencia y pura ignorancia. No quiero que seas como yo en tu próxima entrevista. Así que hablemos sobre la hidratación.

La hidratación es el proceso por el cual el HTML estático se vuelve interactivo al agregarle Javascript. Entonces, normalmente, cuando una página web se representa en el servidor, pierde su interactividad y controladores de eventos antes de llegar al cliente. React es responsable de construir el árbol de componentes en el cliente. Esto se llama hidratación porque agrega la interactividad y los controladores de eventos que se perdieron cuando el HTML se representó en el lado del servidor. React lo compara con el DOM renderizado del lado del servidor real. Deben ser iguales para que React pueda adoptarlo.

Si hay una discrepancia entre la página que tenemos y lo que el lado del cliente cree que deberíamos tener, obtenemos un "Error de hidratación". Algunas causas comunes de errores de hidratación incluyen: anidamiento incorrecto de elementos HTML, diferentes datos utilizados para la representación, uso de API solo para navegador, efectos secundarios, etc.

Cualquiera que sea la causa, tendrás que resolverla leyendo el mensaje de error que aparece. Las posibles soluciones incluyen;

1. Usando useEffect para ejecutar solo en el cliente.
Para evitar una discrepancia en la hidratación, asegúrese de que el componente represente el mismo contenido en el lado del servidor que en el procesamiento inicial del lado del cliente. Puede utilizar el gancho useEffect para representar contenido intencionalmente en el cliente. Vea el ejemplo a continuación:

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. Deshabilitar la representación del lado del servidor en componentes específicos.
Puede utilizar la función deshabilitar la representación previa en Next.js en componentes específicos. Esto puede evitar desajustes de hidratación. Vea el ejemplo a continuación:

import dynamic from 'next/dynamic'

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

export default function Page() {
  return (
    

      
    
  )
}

3. Uso de la advertencia de supresión de hidratación
Hay ocasiones en las que el contenido inevitablemente será diferente en el servidor y en el cliente, casos como la marca de tiempo. Lo que puedes hacer es silenciar la advertencia de falta de coincidencia de hidratación agregando suprimirHydrationWarning={true} al elemento.

Entonces, con estos tres métodos, deberías poder resolver ese error de hidratación la próxima vez que aparezca al compilar en Next.js.

No olvides suscribirte a mi página para obtener más contenido revelador sobre programación.