VUE3 - Suspense

Suspense란?

: component 계층구조에서 여러 중첩된 async dependencies들이 resolved되는 것을 기다리는동안 loading 상태를 랜더링하는 component #default, #fallback 2개의 slot으로 구성됨.

*async dependency? <script setup>에서 await 사용 시, 해당 componnt를 자동으로 비동기 의존성으로 만듬.

<script setup>
const res = await fetch(...)
const posts = await res.json()
</script>

<template>
  {{ posts }}
</template>

pending state일 동안 #fallback slot가 화면에 표시되며, 이 후 모든 async dependencies가 resolved되면 Suspense component도 resolved 상태가 되며 #fallback → #default slot으로 대체

<Suspense>
  <!-- component with nested async dependencies -->
  <Dashboard />

  <!-- loading state via #fallback slot -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

참고: vue.js 공식문서