Nuxt.js 성능 향상 기술 몇 가지

Nuxt.js 프로젝트에서 사용할 수 있는 성능 향상을 위한 기술 몇 가지를 정리합니다.

.Nuxt/dist과 정적 디렉토리는 Nginx에서 직접 전송

정적 파일은 Nuxt.js의 서버를 사용하지 않고 Nginx에서 전송합니다. CDN 같은 것을 이용하면 더욱 효과적이겠지요.

location / {
    root /path/to/nuxt/static;
    try_files $uri @proxy;
}
location @proxy {
    proxy_pass http://127.0.0.1:3000;
}
location /_nuxt {
    alias /path/to/nuxt/.nuxt/dist;
}

API Endpoint를 서버와 클라이언트로 나누기

SSR¹⁾Server Side Rendering Nuxt.js 서버와 API 서버가 동일한 LAN 내부에 있는 경우, 불필요한 네트워크 비용 발생을 방지하도록 SSR일 때 LAN 내부 통신으로 Endpoint를 사용하도록 합니다.

const config = {
  api_host: 'http://example.net/api/v1/',
  api_host_local: 'http://localhost/api/v1/',
}

if (process.server) {
  axios.defaults.baseURL = config.api_host_local
} else {
  axios.defaults.baseURL = config.api_host
}

장치 종류를 판단하여 DOM 렌더링을 제어하기

장치 종류를 구분하여 표시 내용을 변경하고 싶다면, CSS 프레임워크의 반응형 기능을 이용하는 경우가 많을 것 같지만, 이 경우에 DOM 자체는 불필요하게 생성되고 맙니다.

장치의 종류를 판단하여 v-if 같은 것으로 DOM 렌더링을 억제하는 것으로, DOM 렌더링 양을 줄일 수 있습니다.

예시에서는 nuxt-device-detect라는 Nuxt 모듈을 사용하고 있습니다. npm 리포지토리에 공개되어 있으므로 관심이 있으시면 사용해보시기 바랍니다.

<div v-if="$device.isMobile">
  모바일
</div>
<div v-else>
  데스크톱
</div>

병렬로 API 호출하기

Nuxt.js와는 상관 없는 이야기지만, asyncData() 같은 곳에서 복수의 독립된 API를 호출할 경우, 매번 await를 하지 말고 Promise.all()을 사용하는 것으로 병렬 API를 고속으로 호출할 수 있습니다.

async asyncData({app}) {
  let [hogeResult, piyoResult] = await Promise.all([
    app.$axios.get('http://example.com/api/v1/hoge'),
    app.$axios.get('http://example.com/api/v1/geho'),
  ])
}

PWA 모듈 삽입

Nuxt 공식 모듈 중에는 pwa-module이 있습니다. 삽입하는 것만으로 서비스 워커 등 PWA에 필요한 기능을 도입해주는 똑똑한 모듈입니다.

PWA 모듈은 복수 모듈을 합친 것으로, PWA 모듈에 포함되어 있는 workbox 모듈에 의해 서비스 워커가 삽입되고, 더욱 강력한 캐시가 작동하게 됩니다.

$ yarn add @nuxtjs/pwa

// nuxt.config.js
{
  modules: [
    '@nuxtjs/pwa'
  ]
}

출처

이 글은 원본에서 유용하게 쓰인 부분을 옮긴 것입니다.