Frontend Academy · 강의

useFetch와 useAsyncData

useFetch와 useAsyncData로 서버 데이터를 가져오고, 대기 및 오류 상태를 처리하며, Nuxt가 클라이언트를 하이드레이션하는 방식을 이해합니다.

useFetch와 useAsyncData은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Nuxt 3에서 데이터 가져오기

Nuxt는 데이터를 가져오는 두 가지 주요 컴포저블을 제공합니다: useFetch(URL 기반이며 내부적으로 fetch를 호출)와 useAsyncData(임의의 비동기 함수를 사용하며 캐싱/중복 제거를 위한 고유 키를 가짐)입니다.

useFetch — 빠른 방법

URL을 전달하면 Nuxt가 SSR 중에 데이터를 가져오고, 클라이언트에서 하이드레이션하며, 하이드레이션 중 클라이언트가 데이터를 다시 가져오지 않도록 합니다.

<script setup>
const { data: posts, pending, error } = await useFetch('/api/posts');
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <ul v-else>
    <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

하이드레이션 중 중복 가져오기가 없는 이유

Nuxt는 가져온 데이터를 SSR HTML 페이로드에 직렬화합니다. 클라이언트에서 useFetch는 해당 페이로드로 하이드레이션되므로 두 번째 네트워크 호출이 발생하지 않습니다. 이것이 핵심 SSR 최적화입니다.

useAsyncData — 유연한 비동기 처리

데이터 가져오기가 단순한 URL로 해결되지 않을 때 사용하십시오. DB 쿼리, 사용자 지정 로직, 여러 단계의 요청에 적합합니다.

<script setup>
const { data: user } = await useAsyncData('user-profile', async () => {
  const me = await $fetch('/api/me');
  const stats = await $fetch(`/api/users/${me.id}/stats`);
  return { ...me, stats };
});
</script>

캐시 키가 중요한 이유

useAsyncData의 첫 번째 인수는 고유한 캐시 키입니다. 컴포넌트 간에 같은 키를 공유하면 중복 가져오기를 제거하고 결과를 재사용합니다. 키가 다르면 서로 독립적으로 가져옵니다.

// Two components calling useFetch('/api/posts') share one request
// Two components calling useFetch('/api/posts', { key: 'a' }) and { key: 'b' } fetch twice

새로 고침과 지연 로드

두 컴포저블 모두 다시 가져오기 위한 refresh()를 반환하며, { lazy: true }를 전달해 SSR을 차단하지 않도록 할 수 있습니다. 이 경우 페이지가 렌더링된 후 데이터가 로드됩니다.

const { data, refresh } = await useFetch('/api/posts');

async function onSave() {
  await $fetch('/api/posts', { method: 'POST', body: newPost });
  await refresh();
}

// Or lazy mode:
const { data, pending } = useFetch('/api/posts', { lazy: true });

감시와 반응형 URL

URL에 함수를 전달하면 반응형으로 동작합니다. 종속성이 변경될 때 데이터를 다시 가져옵니다.

<script setup>
const page = ref(1);
const { data } = await useFetch(() => `/api/posts?page=${page.value}`);
// Changing page.value re-runs the fetch
</script>

요청 옵션

useFetch는 fetch와 동일한 옵션인 메서드, body, 헤더와 Nuxt 전용 옵션인 기본값 및 transform을 지원합니다.

const { data } = await useFetch('/api/posts', {
  method: 'POST',
  body: { title: 'Hello' },
  headers: { 'X-Custom': '1' },
  transform: (raw) => raw.items.map(transformItem),
  default: () => []
});

$fetch — 명령형 데이터 가져오기

$fetch는 Nuxt의 범용 데이터 가져오기 도구입니다(ofetch를 내부적으로 사용). 자동 하이드레이션 추적은 수행하지 않습니다. 이벤트 처리기와 변경 작업에서 사용하십시오.

async function deletePost(id) {
  await $fetch(`/api/posts/${id}`, { method: 'DELETE' });
  await refresh();
}

오류 처리

가져오기 처리기 내부에서 오류를 발생시키면 오류가 표시됩니다. 페이지에서는 ~/error.vue를 사용해 사용자 지정 오류 페이지를 표시할 수 있습니다.

// error.vue at project root
<script setup>
const props = defineProps<{ error: any }>();
</script>

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
    <button @click="clearError({ redirect: '/' })">Home</button>
  </div>
</template>

인증과 쿠키

useFetch는 SSR 중에 쿠키를 자동으로 전달하므로, 쿠키를 수동으로 처리하지 않아도 인증된 요청이 서버와 클라이언트에서 모두 작동합니다.

useFetch와 useAsyncData — 언제 사용할까요

useFetch: 단순한 URL 기반 요청에 사용합니다(대부분의 경우). useAsyncData: 사용자 지정 비동기 로직, 여러 단계의 구성, URL이 아닌 소스에 사용합니다(server/utils를 통한 데이터베이스 등).

빠른 확인

Nuxt 3에서 페이지가 클라이언트에서 하이드레이션될 때 useFetch가 중복 네트워크 요청을 방지하는 이유는 무엇입니까?

복습: useFetch와 useAsyncData

useFetch: URL 기반으로 가져오는 일반적인 95%의 경우에 사용합니다. useAsyncData: 고유한 캐시 키와 함께 사용자 지정 비동기 로직을 사용할 때 씁니다. 두 함수 모두 SSR 페이로드에서 하이드레이션되므로 요청이 중복되지 않습니다. 다시 가져오려면 refresh()를 사용하고, SSR을 차단하지 않으려면 lazy:true를 사용합니다. 반응형 URL은 다시 가져오기를 자동으로 트리거합니다. 명령형 변경 작업에는 $fetch를 사용합니다. error.vue가 오류를 처리합니다. SSR 중에는 쿠키가 자동으로 전달됩니다.

자주 묻는 질문

“useFetch와 useAsyncData” 강의는 무료인가요?

네 — “useFetch와 useAsyncData” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“useFetch와 useAsyncData”에서 뭘 배우나요?

useFetch와 useAsyncData로 서버 데이터를 가져오고, 대기 및 오류 상태를 처리하며, Nuxt가 클라이언트를 하이드레이션하는 방식을 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“useFetch와 useAsyncData” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기