Next.js 13 - Jotai 的 useHydrateAtoms 挂钩导致 UI 不匹配

Question

使用新的应用程序目录和 jotai 作为全局状态管理器来处理 Next.js 13 项目。现在我尝试使用 useHydrateAtoms 挂钩将初始状态传递给我的原子，如官方文档中所示，但这会导致水合错误。

以下是当前使用的代码的简化版本，它将从服务器端组件接收到的数据传递到调用 useHydrateAtoms 的客户端组件，并使用 useAtom 从该原子读取和写入。

服务器组件（页面）

const getData = async () => {
 // ...
}

export default async function Page() {
  const data = await getData();
  return <ChildComponent initialState={data} />;
}

客户端组件

"use client";

export function ChildComponent({ initialState }) {
  useHydrateAtoms([[myAtom, initialState]]);
  const [data, setData] = useAtom(myAtom);
  return <>{data.id}</>;
}

当我使用 next/dynamic 动态导入子组件并将 SSR 选项设置为 false 或删除 useHydrateAtoms 挂钩时，错误完全消失，但这两种解决方案都违背了此实现的目的。

如何使用来自服务器的值向我的原子提供初始状态，以便原子在第一次客户端渲染时不是 null ？

Answer 1

我发现 useHydrateAtoms 钩子本身并不是问题，它是一个客户端组件，它访问通过 next/dynamic 动态导入的 UI 不同部分的状态 ssr 选项设置为 false。这导致组件显示的值在第一次渲染时发生变化，从而导致 UI 不匹配。

如何修复错误

只需将调用 useHydrateAtoms 的组件移动到组件树的顶部，这将确保所有子组件都将使用正确的值进行渲染。