💥 문제 정의

초기 렌더링 시 깜박거림으로 인해 UI 요소들이 이동되어 UX가 저하되는 문제가 발생했습니다.

🔍 원인 분석

상세 페이지에서 참여자 목록 데이터를 클라이언트에서 API 요청으로 가져오도록 구현되어 있었습니다. 데이터가 도착하기 전에 해당 영역은 비어있는 상태로 렌더링되었고, 데이터가 도착한 후에야 채워지면서 화면이 잠깐 깜빡이는 현상이 발생했습니다.

🔧 해결방법

서버 컴포넌트를 활용하여 데이터를 미리 가져와서 캐싱한 뒤, 클라이언트에서는 캐싱된 데이터를 즉시 사용하도록 변경했습니다.

이를 위해 Tanstack Query의 prefetchQuery와 dehydrate를 사용했습니다.

prefetchQuery은 미리 데이터를 가져와서 캐시에 저장해 useQuery에서 캐시된 데이터를 사용할 수 있습니다.

dehydrate은 서버에서 미리 가져온 쿼리를 클라이언트에서 활용할 수 있도록 해줍니다.

// 서버 컴포넌트에서 QueryClient 생성
const queryClient = getQueryClient();

// 서버에서 데이터를 미리 가져와 캐싱
await Promise.all([
    queryClient.prefetchQuery({
      queryKey: QUERY_KEYS.participants(gatheringId),
      queryFn:() => getParticipants(gatheringId),
    }),
    ...

 // 서버에서 캐시된 데이터를 클라이언트로 전달
const dehydratedState = dehydrate(queryClient);

...

// HydrationBoundary로 감싸 state 전달
<HydrationBoundary state={dehydratedState}>
    <Gathering />
</HydrationBoundary>