$fetch

Nuxt는 ofetch를 사용하여 Vue 앱 또는 API 경로 내에서 HTTP 요청을 만들기 위한 $fetch 헬퍼를 전역적으로 노출한다.

 

서버 측 렌더링 중에 $fetch  호출하여 내부 API 경로를 가져오면 저장 및 추가적인 API 호출과 같은 관련 함수(요청 에뮬레이션)를 직접 호출한다.

useAsyncData 로 래핑하지 않은 채컴포넌트에서 $fetch 를 사용하면 서버에서 클라이언트로 상태를 전송하지 않기 때문에 클라이언트가 데이터를 다시 가져와야 하므로 가져오기가 양쪽에서 실행된다.
따라서 $fetch 를 사용하면 데이터를 두 번 가져온다. 처음에는 서버에서, 그 다음에는 하이드레이션 중에 클라이언트 측에서 다시 가져온다.

 

구성요소 데이터를 가져올 때 이중 데이터 가져오기를 방지하려면 useFetch 또는 useAsyncData  + $fetch 를 사용하는 것이 좋다.

<!--
app.vue
-->

<script setup lang="ts">
// During SSR data is fetched twice, once on the server and once on the client.
const dataTwice = await $fetch('/api/item')

// During SSR data is fetched only on the server side and transferred to the client.
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// You can also useFetch as shortcut of useAsyncData + $fetch
const { data } = await useFetch('/api/item')
</script>

참고) Nuxt-개요 > 데이터 가져오기

 

클라이언트 측에서만 실행되는 모든 메소드에 $fetch를 사용할 수 있다.

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

<script setup lang="ts">
function contactForm() {
  $fetch('/api/contact', {
    method: 'POST',
    body: { hello: 'world '}
  })
}
</script>

<template>
  <button @click="contactForm">Contact</button>
</template>

$fetch 는Nuxt 2용으로 제작된 @nuxt/http 및@nuxtjs/axios 대신 Nuxt에서 HTTP 호출을 수행하는 데 선호되는 방법이다.