[Nuxt] useAsyncData 중복 API 호출 막기

Nuxt3 프로젝트에서 페이지를 새로고침을 하거나 같은 데이터를 패칭할 때 API가 두 번 이상 호출되는 문제가 생겼다.

---

 

중복 호출이 발생하는 이유

Nuxt3는 SSR과 클라이언트 하이드레이션을 동시에 지원한다. 이 과정에서 동일한 데이터 패칭 로직이 서버와 클라이언트에서 각각 한번씩 실행될 수 있다.

 

dedupe 옵션

useAsyncData의 dedupe 옵션은 동일한 key로 중복 호출되는 API 요청을 제어하는 기능이다.
dedupe 옵션을 사용하여 동일 key의 요청이 동시에 여러 번 발생하지 않도록 보장할 수 있다.

• cancel (기본값): 새 요청이 들어오면 기존 요청을 취소하고 새로 요청을 처리.
• defer: 기존 요청이 진행 중이면 새로운 요청을 만들지 않고, 기존 요청이 끝날 때까지 기다림.

 

사용 방법

const { data, pending, error, refresh } = await useAsyncData(
  'abcd-list', // 고유 key
  () => $fetch(url),
  {
    dedupe: 'defer', // 중복 요청 방지
  }
)

• 고유 key는 직접 지정하는 것이 좋다. 지정하지 않으면 자동으로 생성되는데 중복을 유발할 수 있다.
• dedupe: 'defer'를 사용하면, 같은 키로 요청이 진행 중일때 새로운 요청을 만들지 않는다.

 

동작 원리

Nuxt 내부적으로 key별로 요청 Promise를 관리한다.

dedupe 옵션이 defer일 때 이미 요청중이면 기존 Promise를 반환하고, cancel일 때는 기존 요청을 취소하고 새로운 요청을 보낸다.

 

 

 

https://nuxt.com/docs/api/composables/use-async-data