Nuxt를 사용해보자 3탄.

 

 

✏️Nuxt를 사용해보자 3탄.

 

Nuxt를 사용하는 이유는 seo (검색엔진최적화) 때문이다. 

이번 편에서는 seo와 비동기 데이터 처리에 대해 알아보려고 한다. 

 

 

SEO를 위한 Meta Tag 설정하기

 

 

nuxt.config.js

위 파일을 보면 상단에 head라는 영역이 있고, 그 안에 title과 meta 태그가 있다.

 

export default {
  head: {
    title: 'nuxt.js',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'og:description',
        content: '소개 문구',
      },
      {
        name: 'og:title',
        content: '타이틀',
      },
      {
        name: 'og:keywords',
        content:
          '키워드',
      },
      {
        name: 'og:image',
        content: 'assets/images/testimg.png',
      },
      {
        name: 'og:author',
        content: '후니후니',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

 

원래 기본으로 작성되어 있는 것은 desciption 뿐인데, title, keywords, image, author는 따로 추가했다. 

우선 hid라는 처음보는 속성이 있다. 이는 nuxt에서 자동으로 설정해준건데, 

hid라는 유니크한 식별자를 통해 meta 태그를 덮어 씌어준다. 

 

위 파일에서는 글로벌한 설정이고, 각 Page에서 title과 meta 태그를 페이지에 맞게 변경해줄 수 있다.

 

Page

 

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

<script>
export default {
  head: () => ({
    title: 'users',
    meta: [
      {
        hid: 'description',
        name: 'og:description',
        content: 'Users Pages',
      },
    ],
  }),
}
</script>

<style></style>

 

이렇게 만약 users의 페이지일 경우, title, meta태그가 위의 설정대로 변경된다. 

 

 

비동기 데이터 처리를 위한 asyncData

 

Page 컴포넌트를 로딩하기 전에 매번 호출되는 asyncData로 비동기 통신을 할 수 있고, 컴포넌트 데이터와 병합시킬 수 있다.

예시의 코드를 보자.

 

  asyncData({ params }) {
    return axios
      .get(`https://jsonplaceholder.typicode.com/todos/1`)
      .then((res) => {
        return { data: res.data }
      })
      .catch((err) => {
        return err
      })
  },

 

인자로 context를 받기 때문에 params를 가져올 수 있다. 물론 이 데이터를 이용하여 API 호출을 진행할 수도 있다.

위의 코드는 promise로 작성했는데, async await으로도 사용할 수 있다.

 

  async asyncData({ params }) {
    const { data } = await axios.get(
      `https://jsonplaceholder.typicode.com/todos/1`
    )
    return { data }
  },

 

저렇게 return 된 data는 컴포넌트 data와 합쳐지기 때문에 템플릿에서 사용할 수 있다.

asyncData({ res, req })로 요청과 응답 또한 가져올 수 있다.

컴포넌트가 생성되기 전에 호출되는 함수이기에, this를 가져올 수 없다.

 

비동기 호출을 할 수 있는 fetch() 도 존재하지만, asyncData와는 비슷하면서 조금 다르다.

둘 다 컴포넌트를 렌더링하기 전에 비동기 작업을 하지만 asyncData는 렌더링되기전에 데이터를 병합하고,

fetch는 렌더링되기 전에 호출하기 때문에 어떤 디자인 패턴을 사용하느냐에 따라서 두개의 함수 중 

더 어울리는 함수를 사용하면 된다.