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[1]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' ] }
출처
이 글은 원본에서 유용하게 쓰인 부분을 옮긴 것입니다.
주석
↑1 | Server Side Rendering |
---|
답글 남기기