[Nuxt3] useFetch, useAsyncData의 차이

Nuxt3에서는 useAsyncData와 useFetch라는 훅을 지원한다. 이 둘은 코드 구성 형태가 비슷하기 때문에 차이점은 무엇인지 정리해보았다.

useFetch

• useFetch는 created 단계 이후에 실행 (즉 ,새로운 Vue 인스턴스가 만들어진 후 데이터가 준비된 후에 실행)

• 이렇게 하면 useFetch가 실행되는 시점에는 컴포넌트의 데이터가 이미 준비되어 있으므로, 이 데이터를 기반으로 서버로부터 필요한 데이터를 요청하거나 필요한 작업을 수행할 수 있다. 이는 비동기적으로 데이터를 처리하는 웹 애플리케이션에서 매우 중요한 부분

useAsyncData

• useAsyncData는 created 단계 이전에 즉, 첫 렌더링이 시작되기 전에 실행

• 이렇게 하면 첫 페이지 로드 전에 필요한 데이터를 서버에서 미리 가져올 수 있다.

사용 방법 및 구성요소

const { data, pending, error, refresh } = await useAsyncData(key, fetcher)

useAsyncData 매개변수

• key는 고유한 키로, 캐시된 데이터를 가져오거나 저장할 때 사용된다.

• fetcher는 비동기 작업을 수행하는 함수

useAsyncData 리턴값

useAsyncData는 data, pending, error, refresh라는 네 가지 값을 반환한다.

• data: fetcher 함수가 반환하는 값. 아직 데이터가 로드되지 않았거나 오류가 발생하면 null

• pending: 데이터가 로드 중인지 여부를 알려주는 불리언 값 데이터를 가져오는 동안은 true, 그 외의 경우는 false

• error: 데이터를 가져오는 도중 발생한 오류. 오류가 없으면 null

• refresh: 이 함수를 호출하면 fetcher 함수를 다시 실행하여 데이터를 새로 가져온다 ※ refresh 관련해서는 밑에서 더 자세히 정리해 놓았다.

useAsyncData 사용 예시

import { useAsyncData } from 'nuxt3'

export default {
  setup() {
    const { data, pending, error, refresh } = useAsyncData('user', () => 
      fetch('http://localhost:8080/api/user/1')
        .then(response => response.json())
    )

    return { data, pending, error, refresh }
  }
}

위 코드는 ‘user’라는 키를 가지고, ‘http://localhost:8080/api/user/1’ 주소에서 사용자 정보를 가져오는 내용.

‘user‘는 키(key)로써 데이터를 캐싱하는데 사용되는 고유식별자이다. 같은 키를 가진 비동기 데이터 요청이 여러 번 발생하면, Nuxt3는 캐시된 데이터를 반환함으로써 중복된 요청을 방지하여 성능 향상을 기대할 수 있다. (이 키는 클라이언트 측(Nuxt3)에서만 사용되고 서버 측에는 전달되지 않는다)

하지만 이렇게 캐시를 사용하는 경우, 데이터의 신선도를 보장하기 어려울 수 있다. 예를 들어, 서버의 데이터가 변경되었지만, 클라이언트의 캐시는 그대로인 경우, 클라이언트는 서버의 최신 데이터를 보지 못하게 된다. 이런 문제를 해결하기 위해 refresh 함수를 사용하여 캐시를 갱신해야한다.

refresh 함수는 useAsyncData 훅이 반환하는 값 중 하나로, 이 함수를 호출하면 useAsyncData의 fetcher 함수를 다시 호출하여 캐시를 갱신하고 최신 데이터를 가져온다.

**useAsyncData의 **refresh 함수 사용 예시

import { useAsyncData } from 'nuxt3'

export default {
  setup() {
    const { data, refresh } = useAsyncData('user', () => 
      fetch('http://localhost:8080/api/user/1')
        .then(response => response.json())
    )

    const refreshData = () => {
      refresh()
    }

    return { data, refreshData }
  },
  template: `
    <div>
      <div v-if="data">
        <p>{{ data.name }}</p>
        <p>{{ data.email }}</p>
      </div>
      <button @click="refreshData">Refresh Data</button>
    </div>
  `
}

‘http://localhost:8080/api/user/1’ 주소에서 사용자 정보를 조회한 후 응답값을 화면에 보여주는 내용의 코드.

사용자가 ‘Refresh Data’ 버튼을 클릭하면 refreshData 함수가 호출되어 서버에서 최신 데이터를 가져와 화면에 반영된다(데이터 갱신)