<Suspense> は、コンポーネントツリー内の非同期の依存関係を調整する組み込みコンポーネントです。すべてのネストされた非同期操作が解決するまでフォールバック（ローディングUI）を表示し、その後実際のコンテンツを表示します。手動の isLoading ボイラープレートを削除します。
<template>
<Suspense>
<template #default>
<UserDashboard /> <!-- a component with async setup -->
</template>
<template #fallback>
<LoadingSpinner /> <!-- shown while #default is resolving -->
</template>
</Suspense>
</template>
<!-- UserDashboard.vue -->
<script setup>
// top-level await makes this an "async component" that Suspense waits for
const user = await fetchUser(); // no isLoading state needed here
const posts = await fetchPosts();
</script>
<template>
<h1>{{ user.name }}</h1>
<PostList :posts="posts" />
</template>
通常、コンポーネントはローディング状態を管理せずにsetup内で await することはできません。<Suspense> を使用すると、子コンポーネントが トップレベルの await（または非同期 setup）を使用でき、親のSuspenseがそのためのローディング状態を処理します。子コンポーネントのコードはクリーンなままで、単にそのデータを await するだけです。
<Suspense> waits for every async setup in its subtree to resolve,
then swaps the fallback for the real content in one go
(avoids a cascade of separate spinners).
<script setup>
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => { /* handle async setup failures */ return false; });
</script>
Suspenseを error boundary（onErrorCaptured）と組み合わせて、失敗した非同期setupを処理してください。Suspense自体はローディング/ロード完了の遷移のみを管理するためです。
<Suspense> has been an EXPERIMENTAL feature — its API may change.
It's also what Nuxt uses internally to coordinate async page data.
<Suspense> は非同期ローディング状態を宣言的に調整します。コンポーネントが直接データを await できるようにしながら、単一の祖先がすべての準備ができるまで1つのフォールバックを表示します。
分散した isLoading フラグと複数のスピナーを排除し、Nuxtなどのフレームワークのデータフェッチの基盤となります。
それが存在すること（そしてまだ実験的であり、error boundaryと組み合わせるのが最善であること）を知ることは、特にSSR/データが多いアプリケーションでクリーンな非同期UIを実現するのに役立ちます。