Next.js 13 - Le hook useHydrateAtoms de Jotai provoque une incompatibilité de l'interface utilisateur
<p>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 <code>useHydrateAtoms</code> pour transmettre l'état initial à mes atomes comme indiqué dans la documentation officielle, mais cela entraîne une erreur d'hydratation. </p>
<p>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 <code>useHydrateAtoms</code> useAtom</ code> Lire et écrire à partir de cet atome. </p>
<h5>Composant serveur (page)</h5>
<pre class="brush:php;toolbar:false;">const getData = async () =>
//...
}
exporter la fonction asynchrone par défaut Page() {
const data = attendre getData();
return <ChildComponent initialState={data} />;
}</pré>
<h5>Composant client</h5>
<pre class="brush:php;toolbar:false;">"utiliser le client";
fonction d'exportation ChildComponent({ initialState }) {
useHydrateAtoms([[myAtom, initialState]]);
const [data, setData] = useAtom(myAtom);
return <>{data.id}</>;
}</pré>
<p>L'erreur disparaît complètement lorsque j'importe dynamiquement le sous-composant à l'aide de <code>next/dynamic</code> et que je définis l'option SSR sur false ou que je supprime le hook <code>useHydrateAtoms</code> les solutions vont à l’encontre du but de cette implémentation. </p>
<p>Comment puis-je fournir un état initial à mon atome en utilisant une valeur du serveur afin que l'atome ne soit pas <code>null</code> lors du premier rendu client ? </p>
