useNuxtData

Source
데이터 패칭 컴포저블의 현재 캐시된 값을 가져옵니다.
useNuxtData는 명시적으로 제공된 키를 사용해 useAsyncData, useLazyAsyncData, useFetch, useLazyFetch의 현재 캐시된 값에 접근할 수 있게 해줍니다.

Usage

useNuxtData 컴포저블은 useAsyncData, useLazyAsyncData, useFetch, useLazyFetch와 같은 데이터 패칭 컴포저블의 현재 캐시된 값에 접근하는 데 사용됩니다. 데이터 패칭 시 사용했던 키를 제공하면, 캐시된 데이터를 가져와 필요에 따라 사용할 수 있습니다.

이는 이미 가져온 데이터를 재사용하거나 Optimistic Updates, 계단식(cascading) 데이터 업데이트와 같은 기능을 구현해 성능을 최적화하는 데 특히 유용합니다.

useNuxtData를 사용하려면, 데이터 패칭 컴포저블(useFetch, useAsyncData 등)이 명시적으로 제공된 키와 함께 호출되었는지 확인해야 합니다.

Params

  • key: 캐시된 데이터를 식별하는 고유 키입니다. 이 키는 원래 데이터 패칭 시 사용된 키와 일치해야 합니다.

Return Values

  • data: 제공된 키와 연관된 캐시된 데이터에 대한 반응형 참조입니다. 캐시된 데이터가 없으면 값은 null이 됩니다. 이 Ref는 캐시된 데이터가 변경되면 자동으로 업데이트되어, 컴포넌트에서 자연스러운 반응성을 제공합니다.

Example

아래 예시는 서버에서 최신 데이터를 가져오는 동안 캐시된 데이터를 플레이스홀더로 사용하는 방법을 보여줍니다.

app/pages/posts.vue
<script setup lang="ts">
// 나중에 'posts' 키를 사용해 동일한 데이터에 접근할 수 있습니다.
const { data } = await useFetch('/api/posts', { key: 'posts' })
</script>
app/pages/posts/[id].vue
<script setup lang="ts">
// posts.vue(부모 라우트)에서 useFetch의 캐시된 값에 접근합니다.
const { data: posts } = useNuxtData('posts')

const route = useRoute()

const { data } = useLazyFetch(`/api/posts/${route.params.id}`, {
  key: `post-${route.params.id}`,
  default () {
    // 캐시에서 개별 포스트를 찾아 기본값으로 설정합니다.
    return posts.value.find(post => post.id === route.params.id)
  },
})
</script>

Optimistic Updates

아래 예시는 useNuxtData를 사용해 Optimistic Updates를 구현하는 방법을 보여줍니다.

Optimistic Updates는 서버 작업이 성공할 것이라고 가정하고 사용자 인터페이스를 즉시 업데이트하는 기법입니다. 작업이 결국 실패하면 UI를 이전 상태로 롤백합니다.

app/pages/todos.vue
<script setup lang="ts">
// 나중에 'todos' 키를 사용해 동일한 데이터에 접근할 수 있습니다.
const { data } = await useAsyncData('todos', (_nuxtApp, { signal }) => $fetch('/api/todos', { signal }))
</script>
app/components/NewTodo.vue
<script setup lang="ts">
const newTodo = ref('')
let previousTodos = []

// todos.vue에서 useAsyncData의 캐시된 값에 접근합니다.
const { data: todos } = useNuxtData('todos')

async function addTodo () {
  await $fetch('/api/addTodo', {
    method: 'post',
    body: {
      todo: newTodo.value,
    },
    onRequest () {
      // 패칭이 실패했을 때 복원할 수 있도록 이전에 캐시된 값을 저장합니다.
      previousTodos = todos.value

      // 낙관적으로(tentatively) todos를 업데이트합니다.
      todos.value = [...todos.value, newTodo.value]
    },
    onResponseError () {
      // 요청이 실패한 경우 데이터를 롤백합니다.
      todos.value = previousTodos
    },
    async onResponse () {
      // 요청이 성공한 경우 백그라운드에서 todos를 무효화합니다.
      await refreshNuxtData('todos')
    },
  })
}
</script>

Type

Signature
export function useNuxtData<DataT = any> (key: string): { data: Ref<DataT | undefined> }