<p>Arbeiten mit Next.js 13-Projekten unter Verwendung des neuen Anwendungskatalogs und Jotai als globalem Statusmanager. Jetzt versuche ich, den Hook <code>useHydrateAtoms</code> zu verwenden, um den Anfangszustand an meine Atome zu übergeben, wie in der offiziellen Dokumentation gezeigt, aber dies führt zu einem Hydratationsfehler. </p> <p>Das Folgende ist eine vereinfachte Version des derzeit verwendeten Codes, der die von der serverseitigen Komponente empfangenen Daten an die clientseitige Komponente weitergibt, die <code>useHydrateAtoms</code> aufruft und <code> useAtom</ code> Von diesem Atom lesen und schreiben. </p> <h5>Serverkomponente (Seite)</h5> <pre class="brush:php;toolbar:false;">const getData = async () => // ... } Exportieren Sie die standardmäßige asynchrone Funktion Page() { const data = Warten auf getData(); return <ChildComponent initialState={data} />; }</pre> <h5>Client-Komponente</h5> <pre class="brush:php;toolbar:false;">"Client verwenden"; Exportfunktion ChildComponent({ initialState }) { useHydrateAtoms([[myAtom, initialState]]); const [data, setData] = useAtom(myAtom); return <>{data.id}</>; }</pre> <p>Der Fehler verschwindet vollständig, wenn ich die Unterkomponente mit <code>next/dynamic</code> dynamisch importiere und die SSR-Option auf false setze oder den <code>useHydrateAtoms</code>-Hook entferne, aber beides Lösungen verfehlen den Zweck dieser Implementierung. </p> <p>Wie stelle ich meinem Atom mithilfe eines Werts vom Server einen Anfangszustand zur Verfügung, sodass das Atom beim ersten Client-Rendering nicht <code>null</code> ist? </p>