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

Question

我正在尝试使用 Nuxt，因为我需要一个应用程序来使用来自 API.

的数据创建路由

在我的示例中，我通过使用“nuxt/content”获得了虚假数据，并且我在其中获得了 2 家公司：

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

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

/公司1
/公司2

每次在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 文件（在页面文件夹中）：

<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'”，但没有生成路由（或者我没有't event 知道去哪里检查它是否正常工作）。如果我检查 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 and from Nuxt's generate ~ Speeding up dynamic route generation with payload 文档中获得灵感。

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

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

还有一件事要知道，您需要有一个 Node.js 服务器运行。因此，将其托管在 VPS 或 Heroku. If you want to take this route, you can find a tutorial on how to host there just here.

上

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

在接下来的几个 weeks/months 中将推出一个无服务器生成的动态解决方案，称为 Nitro（不过从今天开始不可用）。

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

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

server-side-rendering

nuxt.js

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