(3) nuxt의 비동기 데이터 호출 방식

📌SPA 와 다른 점 

클라이언트 사이드 렌더링(CSR)인  vue SPA에서의 데이터 호출 방식은 아래와 같다.

<template>
  <div>
    <p>{{ user }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: {},
    }
  },
  methods: {
    async fetchUser() {
      const response = await axios.get('/users/1');
      this.user = response.data;
    }
  },
  created() {
    this.fetchUser();
  },
}
</script>

 

created( ) 라이프사이클 훅을 이용하여 컴포넌트가 생성되자마자 서버에 데이터를 요청해 받아온 값을 화면에 표시하는 코드입니다. 이때 서버에 데이터를 요청하는 시점은 브라우저에서 Vue.js 코드가 화면의 DOM을 구성하고 스크립트를 실행하는 시점이다.  CSR과 SSR의 차이점에서도 볼 수있지만 CSR은 빈 화면을 브라우저가 받아 화면에 뿌릴 요소와 데이터를 모두 브라우저에서 구성하기 때문에 위와 같은 코드가 가능하다. 

하지만, nuxt는 서버에서 페이지의 내용을 모두 그려서 브라우저로 가져가야 한다. 그럼 어떻게 해야할까?

📌NUXT의 REST API 호출 방식

SPA에서 페이지에서 데이터를 표시하기 위해서는 vue 라이프 사이클 훅을 사용했다면,
넉스트에서는 아래의 2가지 인스턴스 옵션 속성이 별도로 제공된다. 

• asyncData
• fetch

📌asyncData

asyncData는 페이지 컴포넌트(pages 폴더 아래에 위치하는 컴포넌트)에만 제공되는 속성이다. 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>

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