Nuxt.js performance-enhancing techniques

We summarize some of the techniques for improving performance that you can use in your Nuxt.js project.

.Nuxt/dist and static directories transferred directly from Nginx

Static files are transferred by Nginx without using Nuxt.js’s server. It would be more effective if you use something like a CDN.

Split the API endpoint into server and client

SSR (Server Side Rendering) If the Nuxt.js server and the API server are inside the same LAN, make sure to use the endpoint for intra-LAN communication when SSR to avoid incurring unnecessary hosting costs.

Control DOM rendering by determining device type

If you want to change the display content by device type, it seems that there are many cases where you use the reactive function of the CSS framework, but in this case, the DOM itself is created unnecessarily.

By determining the type of device and suppressing DOM rendering with something like v-if, you can reduce the amount of DOM rendering.

The example uses a Nuxt module called nuxt-device-detect. It’s public in the npm repository, so if you’re interested, you can try it out.

<template>
  <section>
    <div v-if="$device.isDesktop">
      Desktop
    </div>
    <div v-else-if="$device.isTablet">
      Tablet
    </div>
    <div v-else>
      Mobile
    </div>
  </section>
</template>

Calling APIs in Parallel

It has nothing to do with Nuxt.js, but when calling multiple independent APIs in places like asyncData(), you can call parallel APIs at high speed by using Promise.all() without awaiting each time.

async asyncData({app}) {
let [monResult, proResult] = await Promise.all([
app.$axios.get('http://example.com/api/v1/mon'),
app.$axios.get('http://example.com/api/v1/pro'),
])
}

 

Insert PWA module

Among the Nuxt official modules is pwa-module. It is a smart module that introduces functions necessary for PWAs such as service workers just by inserting them.

A PWA module is a combination of multiple modules, and a service worker is inserted by the workbox module included in the PWA module, and a more powerful cache works.

$ yarn add @nuxtjs/pwa

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

that’s all ….if your website powered by WordPress CMS, your fast WordPress hosting give you an excellent boost in website performance.