Next.js 13 - Cangkuk useHydrateAtoms Jotai menyebabkan ketidakpadanan UI

Question

Bekerjasama dengan projek Next.js 13 menggunakan katalog aplikasi baharu dan jotai sebagai pengurus negeri global. Sekarang saya cuba menggunakan cangkuk useHydrateAtoms untuk menghantar keadaan awal kepada atom saya seperti yang ditunjukkan dalam dokumentasi rasmi, tetapi ini mengakibatkan ralat penghidratan.

Berikut ialah versi ringkas bagi kod yang sedang digunakan, yang menghantar data yang diterima daripada komponen bahagian pelayan kepada komponen bahagian klien yang memanggil useHydrateAtoms useAtom Baca dan tulis daripada atom ini.

Komponen Pelayan (Halaman)

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

eksport fungsi async lalai Halaman() {
  data const = menunggu getData();
  kembalikan <ChildComponent initialState={data} />;
}

Komponen pelanggan

"gunakan klien";

fungsi eksport ChildComponent({ initialState }) {
  useHydrateAtoms([[myAtom, initialState]]);
  const [data, setData] = useAtom(myAtom);
  kembalikan <>{data.id}</>;
}

Ralat hilang sepenuhnya apabila saya mengimport subkomponen secara dinamik menggunakan next/dynamic dan menetapkan pilihan SSR kepada palsu atau mengalih keluar useHydrateAtoms penyelesaian mengalahkan tujuan pelaksanaan ini.

Bagaimana cara saya menyediakan keadaan awal kepada atom saya menggunakan nilai daripada pelayan supaya atom tidak null

Answer 1

Saya dapati useHydrateAtoms 钩子本身并不是问题，它是一个客户端组件，它访问通过 next/dynamic 动态导入的 UI 不同部分的状态 ssr 选项设置为 false. Ini menyebabkan nilai yang dipaparkan oleh komponen berubah pada pemaparan pertama, mengakibatkan ketidakpadanan UI.

Cara membetulkan ralat

Hanya alihkan panggilan komponen useHydrateAtoms ke bahagian atas pepohon komponen, ini akan memastikan semua komponen anak akan dipaparkan dengan nilai yang betul.