如何生成带有目标的路由：Nuxt 中的服务器渲染？

Question

我正在尝试 Nuxt，因为我需要一个使用 API 数据创建路由的应用。

在我的示例中，我使用“nuxt/content”获得了一个虚假数据，其中有 2 家公司：

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

这样，我想生成 2 条路线（因为我有 2 家公司）：

• /company1
• /company2

每次在 API 中添加新公司时，我希望 Nuxt 创建一条新路由。

我尝试使用静态模式并成功在nuxt.config.js 中生成函数。但在静态模式下，每次在 API 中添加新数据时，我都会生成静态文件。

这是我为静态模式所做的：

nuxt.config.js 文件：

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 文件（在 pages 文件夹中）：

<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>

这个解决方案在静态中效果很好，因为我在控制台和 dist 文件夹中看到了生成的路由。

但我认为我需要 SSR 解决方案，以便不必一直重新生成静态文件并重新上传它们。

我没有找到这样做的方法，我试图只从 nuxt.config 文件中删除“目标：'static'”，但没有生成路由（或者我不知道去哪里看看它是否工作）。如果我检查 console.log(this.$router)，我只能看到“_slug”和“index”路由。如果我检查 dist 文件夹（和 routes.json 文件）也是一样。

如何在 SSR 模式下做到这一点？我会成为 SEO 的一个很好的解决方案吗？

Answer 1

经过一些尝试和调试后的最终答案

这就是页面/pages/users/_id.vue 的样子

<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>

当您使用target: server 时，让某些东西工作起来就这么简单。
您会注意到，每次手动输入不同的 url 时，您都会在服务器上看到 console.log。这证明你的代码是在你的 Node.js 服务器上运行时生成的。

---

您可能从 Nuxt 的内容 Programmatic Usage 和 Nuxt's generate ~ Speeding up dynamic route generation with payload 文档中获得灵感。

所以，你做得很好！您已经体验过target: static 方法。
需要明确的是，这里的行为完全没问题，这就是应该的工作方式。

如果您希望每次都在服务器上生成它，您需要设置target: server（默认值）并使用yarn build（而不是yarn generate 对应的target: static）构建您的应用程序。

还有一点要知道，您需要运行一个 Node.js 服务器。因此，将其托管在某些 VPS 或 Heroku 上。如果你想走这条路，你可以找到一个关于如何在那里托管的教程just here。

对于 SEO，这个几乎一样好。最大的缺点是您需要为服务器付费。
我不确定target: static 是否仍然不能成为解决方案，因为像Vercel 和Netlify 这样的平台免费提供它，但我猜你的用例（构建时间？）可能不适合这种方法.

---

在接下来的几周/几个月内，即将推出一种无服务器的即时生成解决方案，称为 Nitro（目前尚不可用）。