Nuxt.js - asyncData(),fetch()

bongkey·2021년 4월 20일

Fetch asyncData nuxt

Nuxt

목록 보기

2/4

1. asyncData()

서버사이드 랜더링을 하기 위해 Nuxt.js는 컴포넌트 데이터를 세팅하기 전에 비동기 처리를 할 수 있도록 asyncData()를 제공한다.

asyncData()는 컴포넌트를 로드하기 전에 호출된다.
asyncData()는 페이지 컴포넌트에서만 사용가능하다.
asyncData()는 컨텍스트 객체를 첫번째 인수로 받으며, 이를 사용해 일부 데이터를 가져와 컴포넌트 데이터를 반환할 수 있다.
asyncData()의 return값은 컴포넌트의 data와 병합된다.

asyncData()는 컴포넌트를 초기화 하기 전에 실행되기 때문에 메서드 내부에서는 this를 통해 컴포넌트 인스턴스에 접근할 수 없다.

사용 방법

Promise 객체 사용

export default {
    asyncData({ params }) {
        return axios.get(`https://my-api/posts/${params.id}`).then((res) => {
            return { title: res.data.title };
        });
    },
};

async/await 사용

export default {
    async asyncData({ params }) {
        const { data } = await axios.get(`https://my-api/posts/${params.id}`);
        return { title: data.title };
    },
};

2. fetch()

fetch 메소드는 페이지가 랜더링되기 전에 데이터를 스토어에 넣기위해서 사용합니다.

fetch()는 컴포넌트를 로드하기 전에 호출됩니다.
fetch()는 모든 컴포넌트에서 사용가능합니다.
fetch()는 컨텍스트 객체를 첫번째 인수로 받으며, 그 데이터를 스토어에 넣을 수 있습니다.
fetch()의 return값은 Promise이다..
Nuxt.js는 컴포넌트가 랜더링 되기 전에 Promise가 종료되기를 기다린다.

사용 방법

Promise 객체 사용

export default {
    fetch({ store, params }) {
        return axios.get(`https://my-api/posts/${params.id}`).then((res) => {
            store.commit("setPosts", res.data);
        });
    },
};

async/await 사용

export default {
    async fetch({ store, params }) {
        const { data } = await axios.get(`https://my-api/posts/${params.id}`);
        store.commit("setPosts", data);
    },
};