<Suspense> 非同期の依存を待つ
最終更新：2026-10-22
<Suspense> 非同期の依存を待つ
| グループ | ビルトイン |
|---|---|
| 種類 | コンポーネント・要素 |
| スコープ | テンプレート |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
<Suspense>
<template #default><AsyncChild /></template>
<template #fallback><p>読み込み中…</p></template>
</Suspense>⚙️ 引数
| props | #default（非同期の内容）/ #fallback（待っている間に表示） |
|---|
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Shows 'Loading…' then swaps to 'Async content ready' after ~0.8s.💡 ポイント
⚠️ 注意 まだ実験的な API です。文法がバージョン間で変わる可能性があるため、本番利用は評価のうえ判断してください。
ℹ️ 補足 待つのは第一階層の非同期依存だけです。ネストした Suspense はそれぞれ自分の待ちを処理します。
💡 ヒント 非同期コンポーネント + Suspense は、ルートの遅延読み込みでよく使われる組み合わせです。
🏷️ 関連ビルトイン
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q loading 状態の v-if とは何が違いますか？
A Suspense は非同期の準備が整ったことを自動で感知します。loading 状態の受け渡しを手書きする必要がありません。
Q SSR でも使えますか？
A サーバー側は非同期の内容が整ってから HTML を出力します（フレームワークの対応が必要）。クライアントが引き継いだあとはそのまま続きます。
Q エラーはどう処理しますか？
A 非同期の失敗は onErrorCaptured / errorHandler でキャッチします。Suspense 自体はエラーの受け止め役ではありません。
