Next.js 13 - Jotai의 useHydrateAtoms 후크로 인해 UI 불일치가 발생함

Question

새로운 애플리케이션 디렉토리와 jotai를 전역 상태 관리자로 사용하여 Next.js 13 프로젝트로 작업합니다. 이제 공식 문서에 표시된 대로 useHydrateAtoms 후크를 사용하여 초기 상태를 원자에 전달하려고 시도하지만 이로 인해 수화 오류가 발생합니다.

다음은 현재 사용되는 코드의 단순화된 버전입니다. 이 버전은 서버측 구성요소에서 수신된 데이터를 useHydrateAtoms를 호출하고 useAtom 이 Atom에서 읽고 씁니다.

서버 구성요소(페이지)

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

기본 비동기 함수 내보내기 Page() {
  const 데이터 = getData()를 기다립니다;
  return <ChildComponentinitialState={data} />
}

클라이언트 구성요소

"클라이언트 사용"

내보내기 함수 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를 호출하는 구성 요소를 구성 요소 트리의 맨 위로 이동하기만 하면 모든 하위 구성 요소가 올바른 값으로 렌더링됩니다.