Next.js에서 여러 쿼리를 동시에 프리페칭하기

Next.js 애플리케이션에서 대시보드와 같이 여러 데이터를 한 번에 표시해야 하는 페이지를 구현할 때, 다수의 API 호출이 필요한 경우가 있습니다. 이런 상황에서 TanStack Query의 다중 프리페칭 기능을 활용하면 효율적으로 데이터를 로드할 수 있습니다.

코드 설명

// app/dashboard/page.tsx
import { dehydrate, QueryClient } from '@tanstack/react-query'
import { HydrationBoundary } from '@tanstack/react-query'

export default async function DashboardPage() {
  const queryClient = new QueryClient()

  // 여러 쿼리 동시 프리페칭
  await Promise.all([
    queryClient.prefetchQuery({
      queryKey: ['todos'],
      queryFn: getTodos,
    }),
    queryClient.prefetchQuery({
      queryKey: ['user'],
      queryFn: getUser,
    }),
    queryClient.prefetchQuery({
      queryKey: ['stats'],
      queryFn: getStats,
    }),
  ])

  const dehydratedState = dehydrate(queryClient)

  return (
    <HydrationBoundary state={dehydratedState}>
      <Dashboard />
    </HydrationBoundary>
  )
}

사용 시나리오

이런 방식의 코드는 다음과 같은 상황에서 특히 유용합니다:

1. 대시보드 페이지
   • 사용자 정보, 통계 데이터, 할 일 목록 등 여러 종류의 데이터를 동시에 표시해야 할 때
   • 각각의 데이터가 서로 독립적이어서 병렬로 로드할 수 있는 경우
2. 포털 사이트의 메인 페이지
   • 뉴스, 날씨, 주가 정보 등 다양한 위젯이 존재하는 경우
   • 각 섹션의 데이터를 동시에 로드해야 할 때
3. 복잡한 전자상거래 페이지
   • 상품 정보, 재고 상태, 리뷰, 추천 상품 등을 한 번에 표시해야 하는 경우

장점

1. 성능 최적화
   • Promise.all을 사용하여 모든 쿼리를 병렬로 실행
   • 전체 로딩 시간 단축
2. 데이터 일관성
   • 모든 데이터가 동시에 준비된 상태로 페이지 렌더링
   • 부분적 로딩으로 인한 UI 깜빡임 방지
3. 코드 구조화
   • 데이터 페칭 로직을 한 곳에서 관리
   • 유지보수 용이성 향상

구현 시 주의사항

1. 에러 처리

  try { 
    await Promise.all([ // 쿼리들... ]) 

   } catch (error) { 
   // 에러 처리 로직 console.error('Failed to fetch dashboard data:', error) 
   }

2. 로딩 상태 관리

// Dashboard.tsx 컴포넌트 내부 
const { data: todos, isLoading: isTodosLoading } = useQuery({ 
    queryKey: ['todos'], 
    queryFn: getTodos, 
})

const { data: user, isLoading: isUserLoading } = useQuery({  
    queryKey: \['user'\],  
    queryFn: getUser,  
})

3. 캐시 전략

   queryClient.prefetchQuery({
   queryKey: ['todos'],
   queryFn: getTodos,
   staleTime: 30 * 1000, // 30초
   cacheTime: 5 * 60 * 1000, // 5분
   })

결론

여러 쿼리를 동시에 프리페칭하는 이 패턴은 복잡한 페이지의 성능을 최적화하는 데 매우 효과적입니다. 특히 대시보드나 데이터 집약적인 페이지를 구현할 때 고려해볼 만한 접근 방식입니다. Next.js의 서버 컴포넌트와 TanStack Query의 기능을 결합하여 더 나은 사용자 경험을 제공할 수 있습니다.

이러한 방식은 코드의 가독성과 유지보수성을 높이면서도, 효율적인 데이터 로딩을 가능하게 합니다. 다만, 적절한 에러 처리와 캐시 전략을 함께 고려하여 구현하는 것이 중요합니다.