개발자
류준열

서버 컴포넌트에서 prefetch하여 깜빡임 해결하기

Next.js에서 유저 정보를 API로 받아 화면을 업데이트 할 때, 기본 화면과 업데이트된 화면이 다를 경우 깜빡이는 문제가 발생할 수 있다. 이를 해결하기 위해 서버 컴포넌트에서 데이터를 prefetch하여 클라이언트에서 즉시 활용할 수 있도록 구성했다.

문제상황

  1. 클라이언트에서 useEffect나 useQuery를 사용해 API를 호출하면 처음에 기본 화면이 렌더링 된 후 데이터가 들어와 화면이 업데이트 됨
  2. 이 과정에서 깜빡임 발생
  3. Next.js 서버에서 API를 호출해 쿠키에 유저정보를 저장하는 방법도 고려했지만, middleware에서만 쿠키를 set할 수 있고 코드베이스 복잡도가 높아지는 단점이 있었음.

해결방법

tanstack-query advanced server rendering 문서를 참고했다.

서버 컴포넌트에서 prefetchQuery를 사용해 데이터를 미리 캐싱한 후, HydrationBoundary를 활용해 클라이언트에서 즉시 데이터를 사용할 수 있도록 했다.

AuthGuard(RSC)에서 데이터 prefetch

import { dehydrate, QueryClient } from '@tanstack/react-query';
import { getUserInfo } from '@/api/user';

export default async function AuthGuard() {
  const queryClient = getQueryClient();

  await queryClient.prefetchQuery({
    queryKey: ['user','me'],
    queryFn: getUserInfo,
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
		  {children}
		</HydrationBoundary>
  );
}

이렇게 서버컴포넌트에서 prefetch를 하게 되면 서버컴포넌트에서 실행한 결과를 ['user','me'] 라는 쿼리키에 등록하고, 클라이언트에서 동일한 쿼리키 ['user','me']를 가진 api 가 실행되면 prefetch했던 데이터를 loading 없이 사용할 수 있다.