Next.js 에서 서버 컴포넌트로부터 최신 데이터를 받아내는 훅

Gist 메모 전 임시 저장용

1. 훅 소스

const useNextData = <T,>(init: T) => {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [data, setData] = useState<T>(init);

  const refresh = () => startTransition(() => router.refresh());

  useEffect(() => {
    // console.log('useNextData', init);
    if (!isPending) setData(init);
  }, [init, isPending]);

  return [data, refresh, isPending] as const;
};

2. 서버 컴포넌트 예시

export default async function MyServerComponent() {
  const list = await selectList();
  
  return <MyClientComponent list={list} />
}

3. 클라이언트 컴포넌트 예시

'use client';

export default function MyClientComponent({ list }) {
  const [currentList, refresh, isPending] = useNextData(list);
  const [value, setValue] = useState();
  const [row, setRow] = useState();
  
  // row 에다가 항상 최신 데이터 갱신
  useEffect(() => {
    if (!isPending) {
      const row = currentList.find(row => row.value === value);
      setRow(row);
    }
  }, [currentList, value]);
  
  return <div>
    {/* 갱신이 필요한 컴포넌트에 isPending 으로 리마운트 유도 */}
    {isPending ? <MySelectDummny /> : <MySelect list={list} value={value} onValueChange={setValue} />}
    <div>선택된 정보: {row.label}({row.value})</div>
    <button onClick={refresh}>갱신하기</button>
  </div>;
}

니가 봐서 도움 될까 모르겠지만 어자피 보든 말든 노상관.

끗.