useAsyncData

useAsyncData는 SSR 친화적인 컴포저블에서 비동기적으로 확인되는 데이터에 대한 액세스를 제공한다.

 

페이지, 구성 요소 및 플러그인 내에서 useAsyncData를 사용하여 비동기적으로 확인되는 데이터에 액세스할 수 있다.

useAsyncData 는 설정 함수, 플러그인 또는 라우팅 미들웨어에서 직접 호출되는 컴포저블이다. 반응형 컴포저블을 반환하고 Nuxt 페이로드에 응답을 추가 하므로 페이지가 하이드레이션될 때 클라이언트 측에서 데이터를 다시 가져오지 않고도 서버에서 클라이언트로 응답이 전달될 수 있다.

 

사용법

<!--
page/index.vue
-->

<script setup>
const { data, pending, error, refresh } = await useAsyncData(
  'mountains',
  () => $fetch('https://api.nuxtjs.dev/mountains')
)
</script>

 

Watch Params

내장 watch옵션을 사용하면 변경 사항이 감지될 때 fetcher기능을 자동으로 다시 실행할 수 있다.

<!--
pages/index.vue
-->

<script setup>
const page = ref(1)
const { data: posts } = await useAsyncData(
  'posts',
  () => $fetch('https://fakeApi.com/posts', {
    params: {
      page: page.value
    }
  }), {
    watch: [page]
  }
)
</script>

주의) useAsyncData은 컴파일러에 의해 변환된 예약된 함수 이름이므로 자신의 함수 이름을 useAsyncData 로 지정해서는 안 된다.

 

매개변수

• key: 데이터 가져오기가 요청 전반에 걸쳐 적절하게 중복 제거될 수 있도록 보장하는 고유 키입니다. 키를 제공하지 않으면 useAsyncData 인스턴스의 파일 이름 과 행번호로 생성된 고유한 키가 생성된다.
• handler : 실제 값을 반환해야 하는 비동기 함수(예: undefined 또는 null 이면 안 됨 ). 그렇지 않으면 요청이 클라이언트 측에서 중복될 수 있다.
• options:
  • server : 서버에서 데이터를 가져올지 여부 (기본값은 true)
  • lazy : 클라이언트 측 탐색을 차단하는 대신 경로를 로드한 후 비동기 기능을 해결할지 여부(기본값은 false)
  • immediate : 로 설정하면 false요청이 즉시 실행되지 않는다. (기본값은 true)
  • default : 비동기 함수가 리졸브 되기전에 의 data 기본값을 설정하는 팩토리 함수 - lazy: true 혹은 immediate: false 옵션 과 함께 유용함.
  • transform : 리졸브 후 handler 함수 결과를 변경하는 데 사용할 수 있는 함수
  • pick : handler 함수 결과에서 이 배열의 지정된 키만 선택한다.
  • watch : 자동 새로고침을 위해 반응 소스를 관찰한다.
  • deep : 깊은 참조 객체의 데이터를 반환합니다(기본값 true). 얕은 참조 객체에 데이터를 반환 하도록 false 로 설정할 수 있으며, 이는 데이터가 깊게 반응할 필요가 없는 경우 성능을 향상시킬 수 있다.

내부적으로는 데이터를 가져오기 전에 경로 로드를 차단하는데 lazy: false 는 <Suspense> 를 사용한다. 더 빠른 사용자 경험을 위해 로딩 상태를 구현하고 lazy: true 로 구현하는 것을 고려해 본다.

 

반환 값

• data: 전달된 비동기 함수의 결과.
• pending: 데이터를 아직 가져오는 중인지 여부를 나타내는 부울값.
• refresh / execute: handler 함수에서 반환된 데이터를 새로 고치는 데 사용할 수 있는 함수.
• error: 데이터 가져오기에 실패한 경우 오류 개체.
• status: 데이터 요청 상태를 나타내는 문자열( "idle", "pending", "success", "error").

 

기본적으로 Nuxt는 다시 실행되기 전에 refresh 가 완료될 때까지 기다린다.

서버에서 데이터를 가져오지 않은 경우(예: 를 사용하여 server: false) 하이드레이션이 완료될 때까지 데이터를 가져오지 않는다 . 이는 클라이언트 측에서 useAsyncData 가 대기하더라도 <script setup> 내에  data 가 null 로 남아 있음을 의미한다.

 

Type

// signature

function useAsyncData<DataT, DataE>(
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): AsyncData<DataT, DataE>
function useAsyncData<DataT, DataE>(
  key: string,
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): Promise<AsyncData<DataT, DataE>

type AsyncDataOptions<DataT> = {
  server?: boolean
  lazy?: boolean
  immediate?: boolean
  deep?: boolean
  default?: () => DataT | Ref<DataT> | null
  transform?: (input: DataT) => DataT
  pick?: string[]
  watch?: WatchSource[]
  getCachedData?: (key: string) => DataT
}

type AsyncData<DataT, ErrorT> = {
  data: Ref<DataT | null>
  pending: Ref<boolean>
  refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
  execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
  error: Ref<ErrorT | null>
  status: Ref<AsyncDataRequestStatus>
};

interface AsyncDataExecuteOptions {
  dedupe?: boolean
}

type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'