What's the real difference between target: 'static' and target: 'server' in Nuxt 2.14 universal mode?

Question

in the latest version of Nuxt (2.14) they introduced an optimization for building the app when no code is changed (for drastically improve build times).

I make websites in jamstack, deploy on netlify with nuxt generate and, until now, with target: 'server'. I tried the new target: 'static' in order to take advantage of this new feature, but my code won't build as it seems that in this mode the app can't access to this.$route in order to generate dynamic pages.

So, my question is: how is this different from each other? When I switch target to what I have to pay attention?

Answer 1

Update:

According to the latest documentation, mode: 'universal' and mode: 'spa' were deprecated in favor of ssr: true and ssr: false.

Full static works only with target: 'static' and ssr: true (counterpart of deprecated mode: 'universal'). The ssr: true is a default value. The ssr: false is a counterpart of the deprecated mode: 'spa' and cannot be used with target: 'static'.

Original answer:

Target

It might be helpful to think about the target property as a hosting environment - whether you need a server or static files served by the CDN are good enough for your scenario. Despite the fact it's called target: 'server', it doesn't mean your app is server-side rendered (see mode bellow).

When using the static target, in a production environment, you just need a CDN that will serve your static files. These static files are prepared at the build time and are 'final' (until the next build with updated content or code). There is no need for any server in this scenario (other than CND and build server which will be probably in your CI pipeline).

Target & Mode

On the other hand, when using the server target, your production app will need a server environment where the response for the client's request is composed and is sent. This means that with the updated content there's no need to rebuild your app. This content is composed after the server is requested. This applies to both - universal and spa mode. With the universal mode, your app is server-side rendered. In comparison, with the spa mode there is no server-side rendering (only client-side navigation) and the whole app runs as single page application

Server vs. Static Target

It might be a little bit tricky for newcomers to decide whether to use server-side rendering or static. A good question which might help you make a decision is whether you need to provide different content for each page/document/content item for different user/circumstances. If so, you should probably go with the target server, otherwise static.

Each of these approaches has got its pros and cons such as server requirement, security, speed, CI pipeline/build process, SEO, price, etc. The right choice depends on your use case.

As you mentioned correctly, from version 2.13 there are available two deployment targets. Those are server and static. Source

The old approach had some issues and difficulties, mainly with the client requesting your API via asyncData and fetch functions for your navigation. As a result, the generated site was not pure static whatsoever. All the drawbacks of the old approach are described here.

With the new static target (and mandatory universal mode at the same time) approach, the nuxt generate command will pre-render all your HTML pages and mocks async data requests. That old asyncData and fetch are not requesting your API from the client this time. This is already being performed during the build time. Source

Regarding the routes. The mentioned routes were not probably detected by nuxt's crawler automatically and you should generate them manually using generate.routes property.

import axios from 'axios'

export default {
  generate: {
    routes() {
      return axios.get('https://my-api/users').then(res => {
        return res.data.map(user => {
          return '/users/' + user.id
        })
      })
    }
  }
}