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

Posted 2023-02-22

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

【英文标题】：How to generate routes with target: server rendering in Nuxt?

【发布时间】：2021-10-01 16:31:42

【问题描述】：

我正在尝试 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 文件夹中看到了生成的路由。

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

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

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

【参考方案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（目前尚不可用）。

【讨论】：

感谢您的回答。我试图设置目标：'服务器'。但我无法在我的 _slug 文件中获取有效负载。所以它说“属性或方法“公司”未在实例上定义，但在渲染期间被引用......”另外，如果我进行“npm run build”，我找不到任何带有“/company1”的路线例如. （它适用于静态模式）。

需要注意的是，到目前为止，您还没有任何嵌套路由，您是在根目录中进行的，不是吗？您可能应该将其命名为/companies/1 或/company/2。您也许可以从我之前的一个答案中获得灵感：***.com/a/68431975/8816585 同时，如果它确实适用于static，它也应该适用于server。当你在本地构建它时它会说什么？有什么错误吗？

@jer 好吧，我的错。我又读了一遍并测试了它，它清楚地写着：As of Nuxt v2.13 there is a crawler installed that will crawl your link tags and generate your routes when running nuxt generate。因此，generate.routes 仅在您执行 yarn generate 时才被考虑在内。如果我们考虑一下，确实没有必要提前生成它，因为它仍然会在用户到达 Node.js 服务器时在运行时完成。如果您想拥有公司/API 信息，您可以直接将其放入组件中。在编辑的基础上提交了 PR

好吧，我想用最初的方法没有办法做到这一点。谢谢！所以，如果我想做welcometothejungle.com，例如这个公司的网址：（welcometothejungle.com/fr/companies/zapp），我必须在该获取公司的名称中创建一个带有“_name.vue”的“公司”文件夹（来自我的 API）。 SEO会好吗？我的意思是，现在有像“zapp”、“ingie”等公司命名的公司，谷歌怎么能做到……因为我使用 slugs，服务器现在不可能列出所有公司。我对吗？再次感谢！

要转到/companies/zapp 路径，您需要一个列出所有路径的索引。如果没有列出所有页面的索引，您将无法访问页面。但是你当然会有索引。由于索引，Google 将能够跟踪所有这些动态的_name 路径（这就是 Web 的一般工作方式）。另一件事是，您可以检查源代码，如果您在那里看到您公司的名称（在详细信息页面上或在所有它们的索引中），宾果游戏！唯一的要求是s-s-r: true，target 没什么大不了的，它只是规定了何时生成 s-s-r 的内容。