안녕하세요.

오늘은 Nuxt의 Fetch API와 라이프사이클의 Created 훅에서 API를 호출 했을 때 각각의 차이점에 대해 알아보겠습니다.

SSR 기준으로,

Nuxt 2.12 버전 이후 Fetch API는 Vue instance가 create 된 후에 실행 됩니다.

그러면 Created 훅에서 실행하는 편이 더 빠른 API Response를 가져오지 않을까 궁금해졌는데요.

이를 따로 비교한 글을 찾지 못해 제가 직접 한번 테스트를 해보았습니다.

<template>
  <div class="wrapper"></div>
</template>

<script>
export default {
  fetch() {
    console.timeEnd()
  },
  created() {
    console.time()
  },
}
</script>

Nuxt 페이지를 하나 생성한 다음 위와 같이 작성해줍니다.

둘의 실행시간 차이를 계산하기 위해 console.time, console.timeEnd을 사용하였습니다.

별도의 과정 없이 그냥 해당 페이지의 URL로 접속하면 결과가 나옵니다.

이로써 둘의 차이가 거의 없는 것을 알 수 있었습니다.

created 훅이 0.026ms 더 빠르긴 하지만 Nuxt에서 제공하는 Fetch API의 재사용성 등 편리성을 생각하면,

이 정도는 양보할만 한 듯 싶습니다.