<Suspense>는 컴포넌트 트리의 비동기 의존성을 조율하는 내장 컴포넌트입니다 — 중첩된 모든 비동기 작업이 해결될 때까지 폴백(로딩 UI)을 표시한 뒤 실제 콘텐츠를 보여줍니다. 수동 isLoading 보일러플레이트를 제거합니다.
<template>
<Suspense>
<template #default>
<UserDashboard /> <!-- 비동기 setup을 가진 컴포넌트 -->
</template>
<template #fallback>
<LoadingSpinner /> <!-- #default가 해결되는 동안 표시 -->
</template>
</Suspense>
</template>
<!-- UserDashboard.vue -->
<script setup>
// 최상위 await는 이것을 Suspense가 기다리는 "비동기 컴포넌트"로 만듦
const user = await fetchUser(); // 여기에 isLoading 상태 불필요
const posts = await fetchPosts();
</script>
<template>
<h1>{{ user.name }}</h1>
<PostList :posts="posts" />
</template>
보통 컴포넌트는 로딩 상태를 관리하지 않고는 setup에서 await할 수 없습니다. <Suspense>는 자식이 최상위 await(또는 async setup)를 사용하게 해주고, 부모 Suspense가 그것을 위해 로딩 상태를 처리합니다 — 자식 코드는 데이터를 await하기만 하면 되어 깔끔하게 유지됩니다.
<Suspense>는 하위 트리의 모든 비동기 setup이 해결될 때까지 기다린 뒤,
폴백을 실제 콘텐츠로 한 번에 교체함
(별도 스피너의 연쇄를 방지).
<script setup>
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => { /* 비동기 setup 실패 처리 */ return false; });
</script>
Suspense를 에러 경계(onErrorCaptured)와 함께 사용하여 실패한 비동기 setup을 처리하세요. Suspense 자체는 로딩/로드 완료 전환만 관리하기 때문입니다.
<Suspense>는 실험적(EXPERIMENTAL) 기능이었습니다 — API가 변경될 수 있습니다.
또한 Nuxt가 비동기 페이지 데이터를 조율하기 위해 내부적으로 사용하는 것입니다.
<Suspense>는 비동기 로딩 상태를 선언적으로 조율합니다 — 컴포넌트가 데이터를 직접 await하게 하면서, 모든 것이 준비될 때까지 단일 조상이 하나의 폴백을 표시합니다.
흩어진 isLoading 플래그와 여러 스피너를 제거하며, Nuxt 같은 프레임워크의 데이터 페칭을 뒷받침합니다.
그것이 존재한다는 것(그리고 여전히 실험적이며 에러 경계와 함께 쓰는 것이 가장 좋다는 것)을 아는 것은 깔끔한 비동기 UI에, 특히 SSR/데이터 집약적 앱에 유용합니다.