[컴] nuxt Data fetching

nuxt data fetching / nuxt / data / fetch

nuxt Data fetching

nuxt 에서는 Data fetching(data 가져오기?) 를 제공한다. 이것은 nuxt lifecycle 중 하나이다.(링크 참고)

• Nuxt Lifecycle - NuxtJS

사용

아래처럼 사용할 수 있다. async fetch() 를 보면 된다. 마치 vuejs 의 mounted 처럼 사용하면 된다. mounted 안에 DOM 이 mounted 된 이후의 작업을 적듯이, fetch() 를 하는 시점에 할 일들을 적으면 된다.

<template>
  <div>
  </div
</template>

<script>
function _init() {}

export default {
  name: "MyComponent",
  data() {
    return {
      ...
    };
  },
  async fetch() {
    this.session = await fetch(
      'https://127.0.0.1:5000/test-api'
    ).then(res => res.json())
  },
  fetchOnServer: false, // call fetch only on client-side
  computed: {},
  mounted() {
    console.log("namh");
  },
  methods: {},
  head: {
    title: "my comp",
  },
};


</script>

fetchOnServer

async fetch 와 같이 fetchOnServer option 이 쓰인다. 기본값은 true 이다. 어느시점에 fetch 를 하느냐를 정할 수 있다.

• fetchOnServer = true : rendering 이 되는 시점에 fetch를 호출한다.
• fetchOnServer = false : client-side 에서 fetch 를 호출한다.

static generate

static 으로 build 를 하게 되면, async fetch 의 내용을 미리 가져와서 넣어준다. 다만 build 시점에 url 이 접근가능해야 한다. 만약 local server 로 접근해서 가져와야 하는 경우라면, local server 를 띄워놓고 build 를 해야만 한다.

그리고 fetchOnServer = true인 경우 static 한 값을 넣어서 만들기 때문에, 항상 같은, 변하지 않는 값들을 미리 fetch 할 때 써야한다. 그렇지 않다면 fetchOnServer = false 를 사용해야 한다.

그밖에

그 밖의 자세한 내용은 ref. 1 을 참고하자.

Reference

1. Data Fetching - NuxtJS