Nuxt Payload Extractor

Overview:

The Nuxt payload extractor is a module for Nuxt.js that allows for the storing of data payload in the dist directory during the generation process. This implementation enables full static generation and improves page download speed for crawlers. It also makes the HTML source code cleaner and decreases the load on the API server. Additionally, it ensures consistency between prerendered and client-rendered pages in case the API data changes after the deployment of prerendered pages. The module decreases the initial page download time by 1.5-2 times without affecting performance.

Features:

• Store API data: The module stores API data along with prerendered HTML, enabling client-side navigation even after the site has been prerendered.
• Faster page download speed: The module increases page download speed for crawlers, improving the overall performance of the site.
• Cleaner HTML source code: By extracting the payload into separate files, the HTML source code becomes cleaner and easier to read.
• Reduced load on API server: Storing the data payload reduces the load on the API server, improving its efficiency.
• Consistency between prerendered and client-rendered pages: The module ensures that prerendered and client-rendered pages remain consistent even if the API data changes after the deployment of prerendered pages.
• Decreased initial page download time: The module decreases the initial page download time by 1.5-2 times, improving the overall user experience.

Installation:

To install the Nuxt payload extractor, follow these steps:

1. Add the nuxt-payload-extractor dependency to your project.

npm install nuxt-payload-extractor

2. Define the Nuxt module.

// nuxt.config.js
export default {
  modules: ['nuxt-payload-extractor'],
  // Other Nuxt configuration...
}

3. Add the asyncData custom logic with the $payloadURL helper.

// pages/index.vue
export default {
  async asyncData({ $payloadURL }) {
    const data = await fetch($payloadURL('/api/data'))
    return { data }
  }
  // Other component properties...
}

4. Run the npm run generate command to generate the static files with the payload.

npm run generate

Summary:

The Nuxt payload extractor is a module for Nuxt.js that allows for the storing of data payload in the dist directory during the generation process. This feature, called “full static generated mode,” provides benefits such as improved page download speed for crawlers, cleaner HTML source code, reduced load on the API server, and consistency between prerendered and client-rendered pages. The module decreases the initial page download time, enhancing the overall user experience. It is easy to install and can be integrated into existing Nuxt.js projects.