Nuxt 공부 - asyncData, fetch

Vue에서의 데이터 호출 방식

• 기존 CSR 방식의 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() 훅을 이용해서 컴포넌트가 생성되자마자 서버에 데이터를 요청해 받아온 값을 화면에 표시

• CSR은 빈 화면을 브라우저가 받아와 화면에 뿌릴 요소와 데이터를 모두 브라우저에서 구성

Nuxt의 REST API 호출 방식

1) asyncData

• page 컴포넌트에만 제공되는 속성

• URL/user로 접근할 때 user.vue 컴포넌트를 화면에 그리기 전에 데이터를 요청하는 코드

• 데이터를 다 받아와야지만 데이터를 들고 <template></template> 영역의 코드를 화면에 표시

    <template>
      <div>
        <p>{{ user }}</p>
      </div>
    </template>
  
    <script>
    import axios from 'axios';
  
    export default {
      async asyncData({ params, $http }) {
        const response = await axios.get('/user/${params.id}');
        const user = response.data;
        return { user }
      }
    }
    </script>

asyncData의 파라미터

asyncData 속성의 파라미터는 context 속성입니다.

function (context) {
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
    $config
  } = context

  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }

  if (process.client) {
    const { from, nuxtState } = context
  }
}

asyncData의 에러 헨들링

export default {
  async asyncData({ params, $http, error }) {
    try {
      const response = await axios.get('/user/${params.id}');
      const user = response.data;
      return { user }
    } catch(e) {
      error({ statusCode: 503, message: 'API 요청이 실패했습니다 다시 시도해 주세요' })
    }
  }
}

2) fetch

• page 컴포넌트 뿐만 아니라 일반 뷰 컴포넌트에서도 사용할 수 있는 데이터 호출 속성
• 다음 2가지 상황에서 호출됩니다.
  • 서버 사이드 렌더링을 위해 서버에서 화면을 구성할 때 컴포넌트가 생성되고 나서 실행됨
  • 브라우저에서 URL 주소를 변경해서 페이지를 이동할 때

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

<script>
import axios from 'axios';

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

fetch 특징

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