[useAsyncData, useFetch] cache 처리 방식 비교

// cache.vue

const {data}  = await useFetch(`/api/random-user`, {
  lazy: true
})
</script>

<template>
<div>
<h1> Users </h1>
<div>
  {{  data }}
</div>
</div>
</template>

//random-user.ts

import { sleep } from '@/server/utils/tools';
import { faker } from '@faker-js/faker';

export default defineEventHandler(async (event) => {
  const query = getQuery(event);
  await sleep(1000);

  return {
    firstName: faker.person.firstName(),
    lastName: faker.person.lastName(),
    randonNum: query.randonNum
  }
})

 

cache.vue 에 진입이후 about 등 다른 페이지로 이동후 다시 cache.vue 로 이동해보면(client side)  이전 cache 페이지에서 호출했던 random user 정보가 노출되다가 1초후에 api 호출후 새로운 user name 이 노출되는 것을 볼수 있습니다.

새로운 데이터를 호출하기 전까지 캐싱된 데이터를 보여주는 형태입니다.

useFetch 는 url 을 키로 하여 데이터를 캐싱합니다.

randomNum=Math.random() 을 추가하여 cache -> about -> cache 로 이동해보면 이전 데이터가 보이지 않고
api를 다시 호출한 후에 변경된 user name 으로 화면에 노출됩니다.

만약에 key 옵션과 값이 설정되어 있다면 해당 키로 생성되고 재사용됩니다.
즉 url 기반의 캐싱이 아닌 key 기반의 캐싱을 사용하려면 key 옵션을 사용할수 있습니다.

const { data } = await useFetch(`/api/random-user?randomNum=${Math.random()}`, 
  { lazy: true });
  
  // 혹은
  
const {data}  = await useFetch(`/api/random-user?randonNum=${Math.random()}`, {
  lazy: true,
  key: 'randomUser'
})

 

아래의 경우(key 사용)가 우선순위가 더 높다는 것을 확인 할수 있습니다.

 

useAsyncData 도 캐시를 처리할수 있습니다.

다만 키 설정 방식이 조금 다릅니다.

const { data } = await useAsyncData(() => 
  $fetch(`/api/random-user?randomNum=${Math.random()}`), 
  { lazy: true }
);

 

useFetch 와 비슷하지만 url 를 키로 cache 를 저장하지 않습니다.
useAsyncData 는 라인넘버와 파일이름을 기반으로 키를 생성하여 캐싱합니다.

첫번째 시도처럼 단순히 url 을 변경하는 것으로는 이전 데이터를 먼저 보여주고 api 호출후에 다시 사용자 이름을 노출합니다.

useAsyncData 의 첫 번째 매개변수로 unique 값을 선언하게 되면 그것을 키로 하여 캐시처리 됩니다.
그리하여 매 호출시 과거 데이터 노출없이 새로운 데이터로 갱신이후 노출하려면 useAsynData의 첫번째 매개변수에 랜덤한 값을 넣어 주었습니다.

// 캐시 키를 random 으로 선언합니다.
const { data } = await useAsyncData(
  Math.random().toString(), 
  () => $fetch(`/api/random-user?randomNum=${Math.random()}`), 
  { lazy: true }
);