How to take full advantage of full-static mode in Nuxt.js 2.13

Nuxt.js is an open-source framework for building fast and powerful web applications. On June 18, Nuxt version 2.13 introduced improved support for static apps, making it possible to specify how apps in universal mode ({ mode:'universal'}) are handled. Now there is a clear distinction bewteen how regular server-side rendered apps are handled versus static ones.

Let’s zoom in on this new full-static mode and explore some ways to harness its power when building your next static app with Nuxt.js.

Known issues with Nuxt.js

Before we dive into Nuxt 2.13, let’s briefly touch upon some of the issues that drove the aforementioned changes.

• Running nuxt generate rebuilds your entire app even if it’s not necessary, which slows down deployment times.
• You can’t test the SPA fallback in development since the pages are only excluded when you run nuxt generate
• Building modules or plugins for static apps is tedious because process.static is true only when nuxt generate is run

Solution: The target option

The target option, available in Nuxt 2.13, enables you to explicitly specify how you want Nuxt to handle your app.

To set it in your nuxt.config.js file:

export default {
  mode: 'universal',
  target: 'static' /* or 'server' */
}

Now, running your project in development mode with nuxt dev will:

• Fall back to client-side rendering on 404, errors, and redirects
• Set process.static as true

Note: The full-static mode does not work when the mode is set to spa. To use it, you have to change your mode to universal and the target to static. The default value for target is server, so if the target option is omitted, it will always be server.

Let’s look at some other ways Nuxt 2.13 helps address the problems listed above.

No more build delays

For full-static apps, Nuxt does not need to rebuild the entire project if there are no changes in your code. When nuxt generate is run (available in >= v2.14), Nuxt is smart enough to use the previous build cache during deployment. This improvement accelerates deployment by approximately 3.6 times.

Faster load times

All pages are now prerendered with mode:'universal' and target:'static' to HTML. HTTP requests with asyncData and fetch are made and stored in JS files to be used on client-side navigation, so there really aren’t any HTTP requests being made when you navigate to these pages.

Run production site locally

When you run nuxt generate to generate your static pages in the /dist folder, you can use nuxt start to spin up a production server for your static app. This is perfect for testing locally before deploying to a static host.

Generation config

You can now configure how your static apps are generated with the generate property in nuxt.config.js.

Excluding files from the cache

You can choose to ignore specific directories in your project so when changes happen, they will not trigger any builds.

export default {
  generate: {
    cache: {
      ignore: ['guides'] // changes in the guides folder will not cause a re-build
    }
  }
}

By default, the cache ignores the following files and directories.

• dist/
• .nuxt/
• static/
• .env, .npmrc, and other dotfiles
• node_modules
• README.md

Crawler

In previous versions (<= v2.12), you had to manually add dynamic links in the generate.routes option in your nuxt.config.js file. Nuxt 2.13 comes with a built-in crawler that automatically detects relative links and generates pages for them.

If you want the crawler to skip generation for some routes, you can use generate.exclude and specify the route’s regular expressions or strings. If you want to disable the crawler, set generate.crawler to false.

// in nuxt.config.js file
export default {
  generate: {
    crawler: false
  }
}

If, for some reason, the crawler can’t generate some pages, you can use the generate.routes option to add them yourself.

Next steps

Now that we’ve covered the static portion of the new features introduced in Nuxt 2.13, its time to use them to improve your apps.

Below are some steps you can take to go full-static in your next Nuxt project.

1. Upgrade to Nuxt v2.14
2. Ensure the target is set to static in your nuxt.config.js file
3. Switch your commands in the scripts option in your package.json file to look like this:

   "scripts": {
   "dev": "nuxt",
   "generate": "nuxt generate",
   "start": "nuxt start"
   }

• • nuxt dev will start the development server and will be aware if you are running in static mode or not
  • nuxt generate will generate the static pages to a folder called /dist
  • nuxt start will spin up a production server to serve your static app

Head over to GitHub for more on features and bug fixes introduced in the most recent Nuxt releases.