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

 

 

 

🚀 Nuxt.js 비동기 데이터

    🔽  호출 방법

        📦 개요

Nuxt.js는 SSR(Server Side Rendering) Framework로 Vue.js Single Paga Application과 `REST API` 호출 방식을 다르게 접근해야 합니다.

 

 

        📦 Single Page Application과의 차이점

CSR(Client Side Rendering)인 Vue Single Page Application Data 호출 방식은 아래와 같습니다.

<!-- UserProfile.vue -->
<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()` Life Cycle Hook을 이용해 Component가 생성되면 Server에 Data를 요청해 받아온 결과를 화면에 표시하는 Code에요. 이때 Server에 Data를 요청하는 시점은 브라우저에서 Vue.js Code가 화면의 `DOM`을 구성하고, Script를 실행하는 시점인 것이에요. `Client Side Rendering과 ServerSide Rendering 차이점`의 아래 그림과 같이

출처 : https://joshua1988.github.io/vue-camp/nuxt/ssr.html#%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC

Client Side Rendering은 빈 화면을 브라우저가 받아 화면에 뿌릴 요소와 Data를 모두 브라우저에서 구성하기 때문에 위와 같은 code가 가능해요.

하지만 Nuxt.js는 Server에서 Page 내용을 모두 그려 브라우저로 가져가야 하는데, 어떻게 해야 할까요?

 

 

        📦 REST API 호출 방식

앞에서 본 것처럼 싱글 페이지 애플리케이션에서 페이지에 데이터를 표시하기 위해 `Vue Lift Cycle Hook`을 이용 한 것이에요. Nuxt.js에서는 아래 2가지 인스턴스 옵션 속성이 별도 제공됩니다.

● acnycData
`acyncData`는 Page Component(pages Package 아래 위치하는 Component)에만 제공되는 속성 입니다. `asyncData`로 아래와 같이 Server에게 Data를 요청할 수 있어요.

 

예시 코드

<!-- 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>

반응형

 

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


  - asyncData Parameter
`asyncData` 속성의 파라미터는 `context` 속성인 것이에요. Context 속성은 Nuxt.js 전반에 걸쳐 공용으로 사용되는 속성으로 Plug In, Middleware 속성에서도 접근이 가능합니다. Context에는 Store, Roeuter 관련 정보뿐만 아니라, SSR에서 요청, 응답 관련 속성도 접근이 가능해요.

 

예시 코드

function (context) { // asyncData, plugins, middleware, ...
  // Always available
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
   $config
  } = context

  // Only available on the Server-side
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }

  // Only available on the Client-side
  if (process.client) {
    const { from, nuxtState } = context
  }
}

 

 

  - asyncData Error Code

`acyncData` 속성에서 API 호출 Error가 발생했을 때는 아래와 같이 Error Page로 이동시킬 수도 있어요.

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

 

● fetch
`fetch`는 Page Component 분 아니라 일반 Vue Component에서도 이용할 수 있는 Data 호출 속성인 것이에요. 다음 2가지 상황에서 호출이 된답니다.

   ◦ SSR(Server Side Rendering)을 위해 Server에서 화면을 구성할 때 Component가 생성되고 나서 실행. 
   ◦ 브라우저에서 URL 주소를 변경해서 Page 이동할 때.

예시 코드

<!-- 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>

 

만약 위 Component가 아래와 같이 main.vue Component에 등록 되어 있고, URL 주소가 `/` 에서 `/main`으로 변경되면 Component가 화면에 부착되고 나서(mounted) `fetch`안에 Data Call Logic이 실행됩니다.

<!-- pages/main.vue -->
<template>
  <div>
    <h1>메인 페이지</h1>
    <UserProfile></UserProfile>
  </div>
</template>

<script>
import UserProfile from '@/components/UserProfile.vue'

export default {
  components: {
    UserProfile,
  },
}
</script>

 

출처 :&nbsp;https://joshua1988.github.io/vue-camp/nuxt/data-fetching.html#fetch

 

위 동작에서 볼 수 있듯 최초 `/`로 접근하고, `/main`으로 이동을 했기에 Component가 화면에 먼저 뿌려지고 나서 fetch 호출이 실행됩니다. 이 때문에 `/main`으로 이동하고 나면 Data를 받아오는 동안 `user` 속성의 기본 값인 `{}`가 먼저 화면에 보이고 잠시 뒤 받아온 Data가 화면에 뿌려지는 것을 볼 수 있어요.

여기서 만약 최초 Web Service를 `/main`으로 접근하게 되면 Server 화면을 구성할 때 호출 되게 됩니다. 따라서 화면에 Data가 호출된 상태로 Page가 나타나게 될 것이에요.

출처 :&nbsp;https://joshua1988.github.io/vue-camp/nuxt/data-fetching.html#fetch

 

  - fetch 특징

fetch는 asyncData와 다르게 아래와 같은 속성들이 제공됩니다.

 

   ◦ $fetchState : Data 호출 상태를 나타내는 속성으로 인스턴스로 접근이 가능하며 호출 상태에 따라 `pending`, `error`, `timestamp` 제공.

   ◦ $fetch : fetch Logic을 다시 실행시킬 수 있는 함수.

   ◦ fetchOnServer : SSR시에 Server에서 `fetch`를 실행할지 말지 결정하는 속성으로 기본값은 `true`.

 

 

예시 코드

<template>
  <div>
    <article>
      <p v-if="$fetchState.pending">사용자 API 호출 중</p>
      <p v-else-if="$fetchState.error">에러가 발생했습니다</p>
      <div v-else>{{ user }}</div>
    </article>
    <button @click="fetchUser">다시 호출하기</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: {},
    }
  },
  methods: {
    fetchUser() {
      // fetch 속성의 로직을 실행합니다.
      this.$fetch();
    }
  },
  async fetch() {
    const res = await axios.get('https://jsonplaceholder.typicode.com/users/1');
    this.user = res.data;
  },
  // 아래 속성을 'false'로 바꾸면 서버에서 화면을 구성할 때 `fetch` 속성의 로직이 실행되지 않습니다.
  fetchOnServer: false
}
</script>