$fetch
Nuxt는 HTTP 요청을 수행하기 위해 $fetch 헬퍼를 전역적으로 노출하기 위해 ofetch를 사용합니다.
Nuxt는 ofetch를 사용하여 Vue 앱이나 API 경로 내에서 HTTP 요청을 수행하기 위한 $fetch 헬퍼를 전역적으로 노출합니다.
서버 사이드 렌더링 중에 내부 API 경로를 가져오기 위해 $fetch를 호출하면 관련 함수를 직접 호출하여 요청을 에뮬레이트하고, 추가적인 API 호출을 절약할 수 있습니다.
useAsyncData로 감싸지 않고 컴포넌트에서 $fetch를 사용하면 데이터를 두 번 가져오게 됩니다: 처음에는 서버에서, 그 다음에는 클라이언트 측에서 하이드레이션 중에 다시 가져옵니다. 이는 $fetch가 서버에서 클라이언트로 상태를 전송하지 않기 때문입니다. 따라서 클라이언트가 데이터를 다시 가져와야 하므로 양쪽에서 fetch가 실행됩니다.
사용법
컴포넌트 데이터를 가져올 때 데이터 중복 가져오기를 방지하기 위해 useFetch 또는 useAsyncData + $fetch를 사용하는 것을 권장합니다.
// SSR 중 데이터는 서버와 클라이언트에서 각각 한 번씩 두 번 가져옵니다.
const dataTwice = await $fetch('/api/item')
// SSR 중 데이터는 서버 측에서만 가져오고 클라이언트로 전송됩니다.
const { data } = await useAsyncData('item', () => $fetch('/api/item'))
// useAsyncData + $fetch의 단축키로 useFetch를 사용할 수도 있습니다.
const { data } = await useFetch('/api/item')클라이언트 측에서만 실행되는 메서드에서 $fetch를 사용할 수 있습니다.
<script setup lang="ts">
async function contactForm() {
await $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 호출을 수행하는 선호되는 방법입니다.
개발 중에 자체 서명된 인증서를 사용하는 (외부) HTTPS URL을 호출하기 위해 $fetch를 사용하는 경우, 환경에서 NODE_TLS_REJECT_UNAUTHORIZED=0을 설정해야 합니다.
헤더 및 쿠키 전달
브라우저에서 $fetch를 호출할 때, cookie와 같은 사용자 헤더는 API로 직접 전송됩니다.
그러나 서버 사이드 렌더링 중에는 서버 사이드 요청 위조 (SSRF) 또는 인증 오용과 같은 보안 위험 때문에 $fetch는 사용자의 브라우저 쿠키를 포함하지 않으며, fetch 응답의 쿠키를 전달하지 않습니다.
// SSR 중에는 헤더나 쿠키를 전달하지 않습니다.
const { data } = await useAsyncData(() => $fetch('/api/cookies'))서버에서 헤더와 쿠키를 전달해야 하는 경우, 수동으로 전달해야 합니다:
// 사용자의 헤더와 쿠키를 `/api/cookies`로 전달합니다.
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/cookies'))그러나 서버에서 상대 URL로 useFetch를 호출할 때, Nuxt는 useRequestFetch를 사용하여 헤더와 쿠키를 프록시합니다 (전달되지 않아야 하는 host와 같은 헤더는 예외).
※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.
공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/api/utils/dollarfetch