How nuxt generate dynamic routes

Question

As nuxt's doc said:

Dynamic routes are ignored by the generate command (yarn generate). Nuxt does not know what these routes will be so it can't generate them.

and they have a solution for creating static html files for dynamic routes:

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

My question is: Think we have 50 users when generate nuxt, and nuxt create 50 static html for each of them. But users count is not constant. e.g. one hour later we have 55 users. So, How this handle by nuxt? Or make it clear: Does it handle by nuxt?

I don't know the _how_ but if you prefix the a file with underscore Nuxt makes a dynamic route based on that file. If you have `/users/_id.vue` Nuxt will create a route for every "user" in that path. So you will have urls like `/users/` — Simo D'lo Mafuxwana, Apr 29 '20 at 01:07

Nicolas Pennec · Accepted Answer · 2020-04-29T20:58:01.287

No, it will not be handled by Nuxt. The generate mode will create all static files once at run of the command.

In your case of a dynamic list of users, you have the following solutions:

use nuxt generate + an external hook that triggered a new nuxt generate on each event.
eg. use a cron tab every hour, or on each user creation, to auto-run the generate command
use the "spa" mode nuxt build && nuxt start --spa
You can host it on any static web provider as the generate, but you will lose the SEO advantage...
use the "ssr" mode nuxt build && nuxt start --spa
You will keep the SEO advantage, but you have to found a server provider to host your SSR app on a Node.js instance.

How nuxt generate dynamic routes

1 Answers1