Nuxt.js - nuxt.js의 장점인 server side rendering SSR(서버 사이드 렌더링)

서론

요새 vue.js를 하면서 CSR(클라이언트 사이드 렌더링), SPA(싱글 페이지 어플리케이션) 등등 이야기를 많이 듣는다.

• CSR - 서버는 단지 JSON파일만 보내주고 HTML을 그리는 역할은 클라이언트 측에서 자바스크립트가 수행하는 방식
• SPA - 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션

예전 개발할때 backEnd 위주 front는 backEnd에서 전달해주는 데이터를 HTML 로 노출하는 SSR(서버 사이드 렌더링) 으로 개발을 하였다. 그런데 이런 방식은 HTML를 만들기 위해 서버 자원을 사용하게 되고 이것이 성능 문제를 야기하게 되었다. 그렇게 해서 나온게 SPA 이다.

CSR(클라이언트 사이드 렌더링)

소스

<template>
  <div>
    <h1>CSR</h1>
    <div>
      <ul v-for="(item, index) in items" :key="index">
        <li>id : {{ item.id }}</li>
        <li>title : {{ item.title }}</li>
        <li>body : {{ item.body }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      items: []
    }
  },
  mounted () {
    this.getPostList()
  },
  methods: {
    getPostList () {
      axios.get('https://jsonplaceholder.typicode.com/posts?id=1')
        .then((res) => {
          this.items = res.data
        })
    }
  }
}
</script>

화면

해당 화면은 보통 vue.js에서 사용하는 방식으로

HTML 노출 > mounted 호출 > getPostList 메소드 호출 > items 데이터 set

그런데 이러한 방식은 검색엔진 최적화의 문제가 되어 나온게 Nuxt.js이다.

SSR(서버 사이드 렌더링)

소스

<template>
  <div>
    <h1>SSR</h1>
    <div>
      <ul v-for="(item, index) in items" :key="index">
        <li>id : {{ item.id }}</li>
        <li>title : {{ item.title }}</li>
        <li>body : {{ item.body }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  async asyncData () {
    return axios.get('https://jsonplaceholder.typicode.com/posts?id=1')
      .then((res) => {
        return { items: res.data }
      })
  }
}
</script>

 

화면

asyncData를 이용하여 SSR이 되기전 해당 화면에 필요한 데이터를 미리 set해서 seo에 적용될수 있도록 처리하였다.

해당 방식으로 처리하면 검색엔진에서 'sunt aut' 으로 검색시 노출 될 것입니다.