서버 렌더와 hydration에 재사용되는 비동기 데이터를 가져옵니다.
useAsyncData는 고유 key와 handler를 받아 서버에서 데이터를 해결하고 payload로 전달해 클라이언트 중복 요청을 줄입니다.
handler는 truthy하고 직렬화 가능한 값을 반환하며 key가 같은 호출은 옵션을 일관되게 유지합니다.
pending, error, data와 refresh를 사용해 사용자 상태를 분리합니다.
브라우저에서만 가능한 API를 handler에서 환경 검사 없이 사용하지 마세요.
로컬 프로젝트에서 확인해보세요refresh 버튼과 새 갱신 시간을 추가하세요.
<script setup>
const { data, pending, error, refresh } = await useAsyncData(
"course-summary",
async () => {
await new Promise((r) => setTimeout(r, 300));
return { title: "Nuxt 데이터", completed: 7, total: 12 };
},
);
</script>
<template>
<main>
<p v-if="pending">불러오는 중...</p>
<p v-else-if="error" role="alert">{{ error.message }}</p>
<section v-else>
<h1>{{ data.title }}</h1>
<p>{{ data.completed }}/{{ data.total }}</p>
<button @click="refresh">새로고침</button>
</section>
</main>
</template>