URL 기반 요청의 데이터·오류·상태를 Nuxt 생명주기와 통합합니다.
useFetch는 useAsyncData와 $fetch를 결합해 SSR 요청 결과를 payload로 전달합니다. query, headers와 transform 옵션을 선언적으로 설정할 수 있습니다.
내부 API 호출은 상대 경로를 사용하면 서버 렌더에서 요청 context를 전달할 수 있습니다.
사용자별 응답의 cache key와 인증 header가 다른 사용자와 섞이지 않게 확인합니다.
data가 항상 준비됐다고 가정하고 null 가능성을 무시하지 마세요.
로컬 프로젝트에서 확인해보세요transform 옵션으로 필요한 필드만 남기세요.
<script setup>
const source = 'data:application/json,{"title":"Nuxt useFetch","lessons":18}';
const { data, status, error } = await useFetch(source);
</script>
<template>
<main>
<p v-if="status === 'pending'">요청 중...</p>
<p v-else-if="error" role="alert">{{ error.message }}</p>
<h1 v-else>{{ data.title }} · {{ data.lessons }}강</h1>
</main>
</template>