"L'hydratation a échoué car le code HTML rendu par le serveur ne correspondait pas à celui du client...."

Si vous utilisez Next.js pour créer des applications, vous devez avoir obtenu l'erreur ci-dessus ou quelque chose de similaire. C’est ce qu’on appelle l’erreur d’hydratation.

J'avais l'habitude d'avoir cette erreur lorsque j'ai commencé avec Next.js, mais je ne savais pas quoi faire et je n'ai jamais voulu la rechercher car cela n'affectait pas vraiment mon code à l'époque. Pas jusqu'à ce qu'un intervieweur me demande ce que je ferais pour résoudre une erreur d'hydratation dans Next.js. J'étais abasourdi parce que maintenant ce n'était pas un cas d'intervieweur essayant de me rabaisser, mais un cas de nonchalance et de pure ignorance. Je ne veux pas que tu sois comme moi lors de ta prochaine interview. Discutons donc de l'hydratation.

L'hydratation est le processus par lequel le HTML statique devient interactif en y ajoutant du Javascript. Ainsi, normalement, lorsqu'une page Web est affichée sur le serveur, elle perd son interactivité et ses gestionnaires d'événements avant d'atteindre le client. React est responsable de la construction de l'arborescence des composants sur le client. C'est ce qu'on appelle l'hydratation, car elle ajoute l'interactivité et les gestionnaires d'événements qui ont été perdus lors du rendu du code HTML côté serveur. React le compare avec le DOM réel rendu côté serveur. Ils doivent être identiques pour que React puisse les adopter.

S'il y a une inadéquation entre la page que nous avons et ce que le côté client pense que nous devrions avoir, nous obtenons une « erreur d'hydratation ». Certaines causes courantes d'erreur d'hydratation incluent : une imbrication incorrecte des éléments HTML, des données différentes utilisées pour le rendu, l'utilisation d'API de navigateur uniquement, des effets secondaires, etc.

Quelle que soit la cause, vous devrez la découvrir en lisant le message d'erreur que vous recevez. Les solutions possibles incluent : 

1. Utilisation de useEffect pour s'exécuter sur le client uniquement.
Pour éviter une inadéquation d'hydratation, assurez-vous que le composant restitue le même contenu côté serveur que lors du rendu initial côté client. Vous pouvez utiliser le hook useEffect pour restituer intentionnellement du contenu sur le client. Voir l'exemple ci-dessous :

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. Désactivation du rendu côté serveur sur des composants spécifiques.
Vous pouvez utiliser la fonctionnalité de désactivation du prérendu sur Next.js sur des composants spécifiques. Cela peut éviter les déséquilibres d’hydratation. Voir l'exemple ci-dessous :

import dynamic from 'next/dynamic'

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

export default function Page() {
  return (
    

      
  )
}

3. Utilisation de l'avertissement de suppression d'hydratation
Il y a des moments où le contenu sera inévitablement différent sur le serveur et le client, comme par exemple l'horodatage. Ce que vous pouvez faire est de faire taire l'avertissement de non-concordance d'hydratation en ajoutant suppressHydrationWarning={true} à l'élément.

Ainsi, avec ces trois méthodes, vous devriez être en mesure de résoudre cette erreur d'hydratation la prochaine fois qu'elle apparaîtra lors de la construction sur Next.js.

N'oubliez pas de vous abonner à ma page pour obtenir du contenu plus révélateur sur la programmation.