Nuxt.js 의 API Request 간단 정리

boott·2025년 6월 4일

nuxt

📚 핸드북

목록 보기

10/11

Nuxt3 $fetch, useAsyncData, useFetch 차이 정리

1. $fetch

용도: 클라이언트 사이드 HTTP 요청 처리
특징: ofetch 기반, Node.js 및 브라우저 환경 자동 감지
주의사항: SSR 시 사용 시 중복 호출 위험, 초기 데이터 패칭에 부적합
사용 예시: 버튼 클릭 시 데이터 호출 등 사용자 인터랙션 기반 요청 처리

<script setup lang="ts">
const data = ref();
const testFetch = async () => {
    const result = await $fetch<number>("/api/temp");
    data.value = result;
};
</script>

2. useAsyncData

용도: 서버 및 클라이언트 모두에서 초기 데이터 패칭 지원
특징: Top-level await 지원, key 기반 캐싱, 리액티브 데이터 반환
장점: 외부 변수 변화를 콜백 함수로 반영 가능 (동적 파라미터 반영)
주의사항: SSR 시 쿠키, 로컬스토리지 접근 불가 (useState나 Pinia 사용 필요)

<script setup lang="ts">
const { data, refresh } = await useAsyncData<number>("useAsyncDataTest", () => $fetch("/api/temp"));
</script>

3. useFetch

용도: useAsyncData를 간단하게 래핑한 버전
특징: 초기 값 freezing 발생, 실행 시점 이후 값 변경 반영 불가
자동 반응성: 리액티브 객체를 넘기면 자동으로 값 변동 감지 및 재호출
주의사항: 복잡한 동적 값 처리에는 부적합

<script setup lang="ts">
const { data, refresh } = await useFetch<number>("/api/temp", { key: "useFetchTest" });
</script>

4. 정리

$fetch는 유저 인터랙션 시 사용 (POST, PUT 등).
useAsyncData는 초기 페이지 데이터 로딩에 추천.
useFetch는 간단하지만 자동 갱신이 필요 없는 경우 적합.
SSR 환경에서는 쿠키, 로컬스토리지 접근 불가 주의 필요.

항목	$fetch	useAsyncData	useFetch
SSR 지원	클라이언트 전용	서버/클라이언트 모두 가능	서버/클라이언트 모두 가능
초기 데이터 패칭	부적합	적합 (Top-level await 지원)	적합하지만 freezing 문제 있음
중복 호출 방지	없음	key 기반 캐싱	key 기반 캐싱
자동 반응성	없음	직접 콜백 호출 필요	반응성 객체 변화 감지 후 자동 호출
적합한 상황	사용자 인터랙션 기반 요청 (POST 등)	페이지 초기 렌더링 데이터 패칭	간단한 초기 데이터 패칭 (동적 값 변동이 없는 경우)