My way of handling this kind of issue while minimizing the API calls required are following those steps:

• generate a brand new Nuxt project
• install axios: yarn add -D axios
• add this to the nuxt.config.js file

import axios from 'axios'

export default {
  ...
  generate: {
    routes: async () => {
      const users = await axios.get('https://jsonplaceholder.typicode.com/users')
      return users.data.map((user) => ({
        route: `/users/${user.id}`,
        payload: user,
      }))
    },
    fallback: 'no-user.html', // this one is not needed anymore if you ditch the redirect!
  },
}

This will generate all the needed routes, while keeping the calls to a minimum thanks to payload that will be passed later on to the pages. More info can be found in the docs.

• then, creating the /pages/users/_id.vue page does the trick

<template>
  <div>
    <div v-if="user">User name: {{ user.name }}</div>
    <div v-else-if="error">{{ error }}</div>
  </div>
</template>

<script>
export default {
  asyncData({ payload }) {
    if (payload && Object.entries(payload).length) return { user: payload }
    else return { error: 'This user does not exist' } // this will also catch users going to `/users/`
  },
}
</script>

• create some no-user.vue page, error.vue layout and you should be gucci

At the end, we have 10 users from the mocked API. So those are the following cases:

• if we go to /users/5, the user is already static so we do have it's info without any extra API call
• if we go to /users/11, the user was not present at the time of build, hence he is not here and we are displaying an error
• if we go to /users, we will still be sent to the /pages/users/_id page, but since the :id will be optional there, it will error and still display the error, an index.vue can of course handle this case

My github repo for this one can be found here: https://github.com/kissu/so-nuxt-generate-placeholder-users

It's a tricky way, but I've found the code that works as I want.

https://fes.d3v-svr.com/users/xxxxxx It's works that I expect.

• User xxxxxx doesn't exist
• Display 404 page
• The URL /users/xxxxxx as it is

First, simply set .htaccess to rewrite non-exist page to 404 page

ErrorDocument 404 /no-user/index.html

Only above, Nuxt execute base on URL /users/xxxxxx/ and re-render the page as "UserXXXXXX" even he is not exist.

To avoid this, users/_id.vue is like bellow.

template

<template>
  <div v-if="ssr">User name: {{ user.name }}</div>
</template>

script

<script>
export default {
  asyncData({ payload }) {
    return { user: payload, ssr:true }
  },
}
</script>

It seems to be if a template is empty, nuxt will not execute the script depends on the URL.

It's very tricky, so I'll continue to how it is works.