Next.js 13 - Le hook useHydrateAtoms de Jotai provoque une incompatibilité de l'interface utilisateur

Question

Travailler avec les projets Next.js 13 en utilisant le nouveau catalogue d'applications et Jotai en tant que gestionnaire d'état global. Maintenant, j'essaie d'utiliser le hook useHydrateAtoms pour transmettre l'état initial à mes atomes comme indiqué dans la documentation officielle, mais cela entraîne une erreur d'hydratation.

Ce qui suit est une version simplifiée du code actuellement utilisé, qui transmet les données reçues du composant côté serveur au composant côté client qui appelle useHydrateAtoms useAtom Lire et écrire à partir de cet atome.

Composant serveur (page)

const getData = async () =>
 //...
}

exporter la fonction asynchrone par défaut Page() {
  const data = attendre getData();
  return ;
}
Composant client
"utiliser le client";

fonction d'exportation ChildComponent({ initialState }) {
  useHydrateAtoms([[myAtom, initialState]]);
  const [data, setData] = useAtom(myAtom);
  return <>{data.id};
}
L'erreur disparaît complètement lorsque j'importe dynamiquement le sous-composant à l'aide de next/dynamic et que je définis l'option SSR sur false ou que je supprime le hook useHydrateAtoms les solutions vont à l’encontre du but de cette implémentation. 
Comment puis-je fournir un état initial à mon atome en utilisant une valeur du serveur afin que l'atome ne soit pas null lors du premier rendu client ? 
            

Answer 1

J'ai découvert useHydrateAtoms 钩子本身并不是问题，它是一个客户端组件，它访问通过 next/dynamic 动态导入的 UI 不同部分的状态 ssr 选项设置为 false. Cela entraîne une modification de la valeur affichée par le composant lors du premier rendu, ce qui entraîne une incompatibilité de l'interface utilisateur.

Comment corriger les erreurs

Déplacez simplement le composant appelant useHydrateAtoms en haut de l'arborescence des composants, cela garantira que tous les composants enfants seront rendus avec les valeurs correctes.