1. Les erreurs d'hydratation se produisent lorsque le HTML rendu du serveur ne correspond pas aux attentes c?té client pendant le processus d'hydratation de React, conduisant à des avertissements ou à des problèmes d'interface utilisateur; Le correctif de base est d'assurer la cohérence entre le serveur et les rendus du client. 2. évitez le rendu conditionnel en fonction des données sur le client comme Window ou LocalStorage en reportant un tel rendu à l'aide USESTATE et UTILISATEURS pour définir un indicateur monté sur le client avant d'afficher le contenu spécifique au client. 3. Empêcher les décalages des données asynchrones en utilisant des méthodes de récupération de données c?té serveur comme getSerVersideProps pour garantir que le serveur et le client re?oivent les mêmes données initiales. 4. éliminez les différences basées sur le temps ou le hasard en initialisant les valeurs dynamiques comme les horodatages aux espaces réservés sur le serveur et en les mettant à la mise à jour qu'après le support c?té client. 5. Assurer une structure HTML identique en s'assurant que le rendu conditionnel repose sur les données disponibles pendant la SSR, en évitant les différences DOM en raison de la vérité différente entre les environnements. 6. Déférer le chargement de scripts ou de widgets tiers vers le c?té du client en utilisant USEEFFECT pour empêcher les mutations DOM inattendues après l'hydratation. 7. Suivez les meilleures pratiques: récupérer le c?té du serveur de données, éviter d'utiliser Effectif pour la logique de l'interface utilisateur initiale, aligner l'état initial, préférez CSS au JavaScript pour la réactivité et utilisez la rémunération de l'arrivée avec parcimonie pour des décalages inévitables. En s'assurant que le serveur et le client rendent la même sortie ou le contenu uniquement du client jusqu'à ce qu'après l'hydratation, la plupart des problèmes d'hydratation peuvent être résolus.



Les applications rendues (SSR) c?té serveur - comme celles construites avec Next.js, nuxt.js ou réagissent avec SSR - offrent des charges initiales plus rapides et un meilleur référencement. Mais ils viennent avec un gotcha commun: les erreurs d'hydratation . Ceux-ci se produisent lorsque le HTML rendu au serveur ne correspond pas à ce que le client attend pendant la phase d'hydratation React (ou Vue, etc.). Le résultat? Avertissements dans le DEV, les problèmes d'interface utilisateur potentiels ou même les défaillances complètes des composants.



Décomposons ce qui provoque des décalages d'hydratation et comment les réparer.

---

Qu'est-ce que l'hydratation et pourquoi échoue-t-il?

L'hydratation est le processus dans lequel un cadre JavaScript c?té client "attache" l'interactivité au HTML statique généré sur le serveur. React compare la structure DOM rendu du serveur avec ce qu'il prévoit de rendre sur le client. S'il y a un décalage, React essaie de le réconcilier - souvent avec un avertissement comme:



AVERTISSEMENT: le contenu du texte ne correspondait pas. Serveur: "Chargement ..." Client: "Bonjour, utilisateur"

Cette inadéquation rompt les hypothèses sur lesquelles SSR s'appuie et peut entra?ner des bogues ou des problèmes de performances.



---

Causes courantes et comment les réparer

1. Rendu conditionnel basé sur les données uniquement du client

L'un des coupables les plus fréquents est de rendre un contenu différent sur le serveur par rapport au client en raison d'API spécifiques du navigateur (comme window , localStorage ou navigator ).

 fonction myComponent () {
  const [ismobile, setismobile] = useState (false);

  useEFFECT (() => {
    setismobile (window.innerwidth <768);
  }, []);

  return <div> {ismobile? &#39;Mobile View&#39;: &#39;Desktop View&#39;} </div>;
}

Problème : Sur le serveur, window n'est pas définie, donc isMobile commence comme false . Mais sur le client, il peut être true après que useEffect fonctionne → Affaire d'hydratation.

Solution : retarder le rendu jusqu'à après le montage ou utiliser un rendu à deux passes:

 fonction myComponent () {
  const [isClient, setSisclient] = useState (false);

  useEFFECT (() => {
    SetIsclient (vrai);
  }, []);

  if (! isClient) {
    return <div> Chargement ... </div>; // ou null, ou un espace réservé statique
  }

  return <div> {window.innerwidth <768? &#39;Mobile&#39;: &#39;Desktop&#39;} </div>;
}

Alternativement, utilisez une détection basée sur l'assistance comme useEffect ou un système de conception réactif (CSS Media Queries) pour éviter les décisions de rendu basées sur JS.

---

2. Données asynchrones qui résout trop tard

Si votre composant rend un contenu différent en attendant les données (par exemple, un état de chargement), mais que le serveur ne simule pas correctement cet état, des décalages se produisent.

 fonction userProfile ({userId}) {
  const [utilisateur, setUser] = useState (null);

  useEFFECT (() => {
    fetchuser (userId) .Then (SetUser);
  }, [ID de l'utilisateur]);

  Utilisateur de retour? <h1> {user.name} </h1>: <p> Chargement ... </p>;
}

Problème : le serveur peut rendre "Chargement ...", mais si l'état client démarre comme null , React s'attend à "Chargement ...", donc cela peut correspondre. Mais si la récupération c?té client se résout instantanément à partir du cache, elle pourrait passer au nom → Déliasse.

Meilleure approche : utilisez la récupération des données intégrée des frameworks ( getServerSideProps , load , etc.) pour récupérer des données sur le serveur et les transmettre sous forme d'accessoires.

 // Exemple suivant.js
Exporter la fonction asynchrone getServersIDEPROPS () {
  const user = attendre fetchuser ();
  return {props: {user}};
}

fonction userProfile ({user}) {
  return <h1> {user.name} </h1>;
}

Maintenant, le serveur et le client rendent la même chose, pas de décalage.

---

3. Contenu dynamique basé sur le temps ou le hasard

 fonction horloge () {
  const time = new Date (). TolocaleTimeString ();
  return <div> {time} </div>;
}

Problème : le serveur rend un temps, le client en rend un décalage légèrement différent →.

Solution : rendre un espace réservé sur le serveur et hydrater avec la bonne valeur:

 fonction horloge () {
  const [time, settime] = useState (new Date (). TolocaleTimeString ());

  useEFFECT (() => {
    const interval = setInterval (() => {
      setTime (new Date (). TolocaleTimeString ());
    }, 1000);
    return () => ClearInterval (interval);
  }, []);

  return <div> {time} </div>;
}

Mais note: l'état initial utilise toujours new Date() , qui s'exécute sur le serveur et le client. Si le timing est très proche, cela peut correspondre. Pour une cohérence stricte, envisagez d'initialiser l'état dans un espace réservé et de mise à jour uniquement sur le mont.

 const [time, settime] = useState ('...');

---

4. Structure HTML dépareillée

Même de petites différences de balisage peuvent déclencher des avertissements:

 {user && <p> bienvenue, {user.name} </p>}

Si user est null sur le serveur mais que la vérification du client (ou vice versa), la structure DOM diffère.

Correction : Assurez-vous que les données utilisées dans le rendu conditionnel sont disponibles pendant la RSS. Utilisez la récupération des données pour résoudre ces accessoires sur le serveur.

évitez également de rendre différents composants en fonction de l'environnement sauf si nécessaire.

---

5. scripts ou widgets tiers

Les bibliothèques qui injectent du contenu (publicités, chatbots, analytiques) modifient souvent le DOM après l'hydratation, ce qui ne s'attend pas.

Solution : Chargez de tels scripts uniquement sur le client et après l'hydratation:

 useEFFECT (() => {
  const script = document.createElement ('script');
  script.src = 'https://example.com/widget.js';
  document.body.appendChild (script);
}, []);

Enveloppez le composant dans un garde useClient ou isClient pour empêcher le rendu SSR.

---

Meilleures pratiques pour éviter les erreurs d'hydratation

• ? Remplissez les données sur le serveur lorsque cela est possible (chargement de données convivial SSR).
• ? évitez useEffect pour la logique de rendu initial qui modifie l'interface utilisateur visible.
• ? Utilisez useEffect pour définir un drapeau "monté" et rendre conditionnellement le contenu du client uniquement.
• ? Faire correspondre l'état initial sur le serveur et le client - ne comptez pas sur les API du navigateur pendant le rendu.
• ? Tirez parti de CSS pour un comportement réactif au lieu du rendu basé sur JS.
• ? Utilisez suppressHydrationWarning={true} avec parcimonie (uniquement sur les décalages directs que vous ne pouvez pas corriger).

 <div suppresshydratationwarning>
  {Math.random ()}
</div>

Cela supprime l'avertissement mais ne résout pas le problème sous-jacent - utilisez-le avec prudence.

---

Les erreurs d'hydratation sont souvent des sympt?mes de divergence serveur-client dans les hypothèses. En alignant ce qui est rendu des deux c?tés - ou reportant gracieusement le rendu spécifique au client - vous pouvez éliminer la plupart des problèmes.

Fondamentalement: si cela ne peut pas être fait sur le serveur, ne le laissez pas affecter le rendu initial .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!