Nuxt.js 데이터 가져오기 후크: 비동기 데이터.

이 블로그에서는 Nuxt.js asyncData 후크에 대해 논의하고 있습니다. Nuxt.js의 서버 측 렌더링에는 특정 후크를 사용해야 합니다. 이렇게 하면 필요한 모든 데이터가 표시된 상태로 페이지를 렌더링할 수 있습니다.

Nuxt.js에는 비동기 데이터 로드를 위한 두 가지 후크가 있습니다.

가져오기 후크

asyncData 후크

또한 Nuxt.js는 구성 요소의 mounted() 후크에서 데이터를 가져오는 것과 같이 클라이언트 측 앱에서 데이터를 로드하기 위한 기존 Vue 패턴을 지원합니다.

Nuxt.js에서 asyncData 후크의 몇 가지 중요한 기능:

asyncData는 서버측 및 클라이언트측 렌더링 모두에서 작동합니다.

구성 요소를 로드하기 전에 매번 asyncData가 호출됩니다.

vue 구성 요소가 아닌 다음 페이지에서만 사용할 수 있습니다.

구성 요소가 마운트되기 전에 서버 측에서 anyncData가 호출됩니다. 이것이 asyncData() 내부의 'this' 키워드에 접근할 수 없는 이유입니다.

이 메소드는 context 객체를 첫 번째 인수로 받고 이를 사용하여 route, store, params, app 등과 같은 핵심 nuxt 속성에 액세스할 수 있습니다.

asyncData의 결과가 데이터와 병합됩니다.

다음은 @nuxt/axios 라이브러리를 사용하는 nuxt asyncData의 예입니다.

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({params, $axios }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>

asyncData 후크는 약속을 반환하고 경로 전환 중에 해결되었습니다. 즉, 클라이언트 측 전환 중에는 "로딩 자리 표시자"가 표시되지 않지만 를 사용하여 사용자에게 로드 상태를 표시할 수 있습니다.

클라이언트 측 및 서버 측 모두에서 asyncData():

클라이언트 측과 서버 측 모두에서 asyncData()가 어떻게 작동하는지 테스트하려면 Nuxt.js 페이지에 다음 코드를 작성하세요.

<script>
export default{
    asyncData(context){
        console.log(context);
}
}
</script>

서버 측 테스트
이제 브라우저에서 페이지를 다시 로드하고 Nuxt.js 애플리케이션이 실행 중인 터미널 내부를 살펴보세요(브라우저 콘솔 패널 Nuxt SSR 응답에서도 확인할 수 있음). 아래 스크린샷과 같은 컨텍스트 개체를 볼 수 있습니다. 이는 서버 측에서 작동한다는 것을 의미합니다.


클라이언트 측 테스트
또한 다른 Nuxt.js 페이지에서 이 페이지를 방문했을 때 클라이언트 측 렌더링을 확인할 수도 있습니다(링크는 페이지 간 연결을 위해 NuxtLink를 사용해야 합니다). 이제 브라우저 개발 도구를 열고 콘솔 패널을 확인하면 asyncData()의 마법을 볼 수 있습니다.

컴포넌트에서 비동기 데이터를 사용하는 방법:

우리는 이미 구성 요소 내에서 anyncData 후크를 사용할 수 없다는 것을 알고 있지만 구성 요소에 대해 다른 방법을 사용할 수 있습니다.
페이지 구성 요소의 asyncData 메서드에서 API 호출을 만들고 데이터를 하위 구성 요소에 소품으로 전달합니다. 클라이언트 및 서버 측 렌더링이 모두 잘 작동합니다.

참조: Nuxt.js 공식 데이터 가져오기Hook