How to generate routes with target: server rendering in Nuxt?

Question

I'm trying Nuxt because I need an app that create routes with data from an API.

For my example I got a fake data by using "nuxt/content" and I got 2 companies inside:

[
  {
   "id": "1",
   "name": "company1"
  },
  {
   "id": "2",
   "name": "company2"
  }    
]

With that, I would like to generate 2 routes so (because I got 2 companies):

• /company1
• /company2

Everytime a new company will be added in the API, I want that Nuxt create a new route.

I tried with static mode and generate function in nuxt.config.js with success. But in static mode, I have a generate static files every time a new data is added in the API.

Here what I did for static mode:

nuxt.config.js file:

export default {
  target: 'static',
  generate: {
    async routes() {
    const { $content } = require('@nuxt/content')

     const files = await $content('companies').fetch()
     return files.map(company => {
       return {
         route: '/' + company.name,
         payload: company
       }
     })
   }
},

_slug.vue file (in pages folder):

<template>
  <div>
    <h1>test</h1>
    <p>Path: {{ $route.path }}</p>

    data : {{ company }}
  </div>
</template>

<script>
  export default {
    asyncData({ payload }) {
      if (payload) return { company: payload}
      else {
        return '-1'
      }
    },
    mounted() {
      console.log(this.$router)
    }
  }
</script>

This solution worked great in Static because I saw the generated routes in the console and in the dist folder.

But I think I need the SSR solution to not to have to re-generate the static files all the time and re-upload them.

I didn't find the way to do that, I tried to only remove the "target: 'static'" from the nuxt.config file but the routes aren't generated (or I don't event know where to look to check if it's working). I have see only "_slug" and "index" route if I check the console.log(this.$router). Same if I check the dist folder (and routes.json file).

How do I do that in SSR mode? And will I be a good solution for the SEO?

Answer 1

Final answer after some tries and debugging

This is how the page /pages/users/_id.vue should look like

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

<script>
export default {
  async asyncData({ $axios, params }) {
    console.log('user ID >>', params.id)
    const user = await $axios.$get(`https://jsonplaceholder.typicode.com/users/${params.id}`)
    return { user }
  },
}
</script>

This is as simple to have something working as that, when you're using target: server.
You'll notice that each time your enter a different url manually, you'll see a console.log on your server. This proves you that the code there is generated on runtime on your Node.js server.

---

You probably took inspiration from Nuxt's content Programmatic Usage and from Nuxt's generate ~ Speeding up dynamic route generation with payload documentations.

So, you're totally doing it well! You've experienced the target: static approach.
Just to be clear, the behavior is totally fine here and this is how this is supposed to work.

If you want to have it generated each time on the server, you will need to set target: server (default value) and build your app with yarn build (rather than yarn generate for the target: static counterpart).

One more thing to know, is that you will need to have a Node.js server running. Hence, host it on some VPS or Heroku. If you want to take this route, you can find a tutorial on how to host there just here.

For SEO, this one will pretty much be as good. The biggest downside is that you need to pay for a server.
I'm not sure if target: static cannot be a solution still because platform like Vercel and Netlify are offering it for free, but I guess that your use-case (build time?) is maybe not suited for this approach.

---

A serverless-generation on the fly solution is coming in the next few weeks/months, called Nitro (not available as of today tho).