Next.js 13 - Jotai の useHydrateAtoms フックにより UI の不一致が発生する

Question

<p>新しいアプリケーション カタログと jotai をグローバル状態マネージャーとして使用して、Next.js 13 プロジェクトを操作します。ここで、公式ドキュメントに示されているように、<code>useHydrateAtoms</code> フックを使用して初期状態を原子に渡そうとしていますが、これによりハイドレーション エラーが発生します。 </p> <p>以下は現在使用されているコードの簡略版で、サーバー側コンポーネントから受信したデータを、<code>useHydrateAtoms</code> を呼び出し、<code> を使用するクライアント側コンポーネントに渡します。 useAtom</ code> このアトムからの読み取りと書き込み。 </p> <h5>サーバーコンポーネント (ページ)</h5> <pre class="brush:php;toolbar:false;">const getData = async () => { // ... } デフォルトの非同期関数 Page() をエクスポート { const data = await getData(); return <ChildComponentInitialState={data} />; }</pre>

クライアントコンポーネント

<pre class="brush:php;toolbar:false;">"クライアントを使用"; エクスポート関数 ChildComponent({ 初期状態 }) { useHydrateAtoms([[myAtom,InitialState]]); const [データ、setData] = useAtom(myAtom); return <>{data.id}</>; }</pre> <p><code>next/dynamic</code> を使用してサブコンポーネントを動的にインポートし、SSR オプションを false に設定するか、<code>useHydrateAtoms</code> フックを削除すると、エラーは完全に消えますが、両方ともソリューションは、この実装の目的を無効にします。 </p> <p>最初のクライアントレンダリングでアトムが <code>null</code> にならないように、サーバーからの値を使用してアトムに初期状態を提供するにはどうすればよいですか? </p>

Answer 1

私が発見したのは、useHydrateAtoms フック自体が問題ではなく、next/dynamic ssr オプションを介して動的にインポートされた UI のさまざまな部分の状態にアクセスするクライアント コンポーネントであるということです。 false に設定します。これにより、コンポーネントによって表示される値が最初のレンダリング時に変更され、UI の不一致が発生します。

エラーの修正方法

useHydrateAtoms を呼び出すコンポーネントをコンポーネント ツリーの最上部に移動するだけです。これにより、すべての子コンポーネントが正しい値でレンダリングされます。