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 ?