新しいアプリケーション カタログと jotai をグローバル状態マネージャーとして使用して、Next.js 13 プロジェクトを操作します。ここで、公式ドキュメントに示されているように、useHydrateAtoms フックを使用して初期状態を原子に渡そうとしていますが、これによりハイドレーション エラーが発生します。
以下は現在使用されているコードの簡略版で、サーバー側コンポーネントから受信したデータを、useHydrateAtoms を呼び出し、 を使用するクライアント側コンポーネントに渡します。 useAtom このアトムからの読み取りと書き込み。
const getData = async () => { // ... } デフォルトの非同期関数 Page() をエクスポート { const data = await getData(); return
"クライアントを使用"; エクスポート関数 ChildComponent({ 初期状態 }) { useHydrateAtoms([[myAtom,InitialState]]); const [データ、setData] = useAtom(myAtom); return <>{data.id}; } next/dynamic を使用してサブコンポーネントを動的にインポートし、SSR オプションを false に設定するか、useHydrateAtoms フックを削除すると、エラーは完全に消えますが、両方ともソリューションは、この実装の目的を無効にします。
最初のクライアントレンダリングでアトムが null にならないように、サーバーからの値を使用してアトムに初期状態を提供するにはどうすればよいですか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
私が発見したのは、
useHydrateAtomsフック自体が問題ではなく、next/dynamicssrオプションを介して動的にインポートされた UI のさまざまな部分の状態にアクセスするクライアント コンポーネントであるということです。falseに設定します。これにより、コンポーネントによって表示される値が最初のレンダリング時に変更され、UI の不一致が発生します。エラーの修正方法
useHydrateAtomsを呼び出すコンポーネントをコンポーネント ツリーの最上部に移動するだけです。これにより、すべての子コンポーネントが正しい値でレンダリングされます。