Next.js 13 - Jotai 的 useHydrateAtoms 掛鉤導致 UI 不匹配

Question

使用新的應用程式目錄和 jotai 作為全域狀態管理器來處理 Next.js 13 專案。現在我嘗試使用 useHydrateAtoms 掛鉤將初始狀態傳遞給我的原子，如官方文件所示，但這會導致水合錯誤。

以下是目前使用的程式碼的簡化版本，它將從伺服器端元件接收到的資料傳遞到呼叫useHydrateAtoms 的客戶端元件，並使用useAtom 的客戶端元件，並使用useAtom 的客戶端元件，並使用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 的元件移到元件樹的頂部，這將確保所有子元件都將使用正確的值進行渲染。