[Nuxt.js]Nuxt의 비동기 데이터 호출 방법

Nuxt는 서버 사이드 렌더링 프레임워크이기 때문에 뷰 싱글 페이지 애플리케이션과 REST API를 호출하는 방식을 다르게 접근해야 한다.

🤔Nuxt의 REST API 호출 방식

• asyncData
• fetch

💡asyncData

asyncData는 페이지 컴포넌트에만 제공되는 속성이다.
asyncData로 아래와 같이 서버 데이터를 호출할 수 있다.

<!-- pages/user.vue -->
<template>
  <div>
    <p>{{ user }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  // params의 id가 1이라고 가정
  async asyncData({ params, $http }) {
    const response = await axios.get(`/users/${params.id}`);
    const user = response.data;
    return { user }
  }
}
</script>

위 코드는 /user 로 접근할 때 user.vue 컴포넌트를 화면에 그리기 전에 데이터를 요청하는 코드이다.
데이터를 다 받아와야지만 영역의 코드를 화면에 표시한다.
마치 싱글 페이지 애플리케이션의 뷰 라우터에서 네비게이션 가드에서 데이터를 호출하고 받아왔을 때 페이지를 진입하는 것과 같다.

✅asyncData의 파라미터

asyncData 속성의 파라미터는 context 속성이다.
context 속성은 nuxt 프레임워크 전반에 걸쳐 공용으로 사용되는 속성으로써 플러그인, 미들웨어 등의 속성에서도 접근할 수 있다. 컨텍스트에는 스토어, 라우터 관련 정보뿐만 아니라 서버 사이드에서 요청, 응답 관련된 속성도 접근할 수 있다.

💡fetch

fetch는 페이지 컴포넌트 뿐만 아니라 일반 뷰 컴포넌트에서도 사용할 수 있는 데이터 호출 속성이다.
fetch는 다음 2가지 상황에서 호출된다.

• 서버 사이드 렌더링을 위해 서버에서 화면을 구성할 때 컴포넌트가 생성되고 나서 실행
• 브라우저에서 URL 주소를 변경해서 페이지를 이동할 때

아래에는 예제 코드

<!-- components/UserProfile.vue -->
<template>
  <div>{{ user }}</div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: {},
    }
  },
  async fetch() {
    const res = await axios.get('https://jsonplaceholder.typicode.com/users/1');
    this.user = res.data;
  },
}
</script>
 

fetch를 사용하면 컴포넌트가 화면에 먼저 뿌려지고 나서 fetch 호출이 실행된다.
따라서 페이지를 이동하고 나면 데이터를 받아오는 동안 빈 페이지가 보이고 잠시 후에 받아온 데이터가 화면에 그려지게 된다.

✅fetch 특징

• 페이지 컴포넌트 뿐만 아니라 일반 컴포넌트에서도 사용이 가능하다.
• fetch의 return 값은 Promise 이다.
• fetch는 asyncData와 다르게 아래와 같은 속성들을 제공한다.

• $fetchState : 데이터 호출 상태를 나타내는 속성이며 인스턴스로 접근할 수 있따. 호출 상태에 따라 pending, error, timestamp를 제공한다.
• $fetch : fetch 로직을 다시 실행시킬 수 있는 함수이다.
• fetchOnServer : 서버 사이드 렌더링 시에 서버에서 fetch를 실행할지 말지 결정하는 속성이다. 기본값은 true
• fetchDelay : 실행 시간을 설정한다. 기본값은 200