是否可以使用 nuxt fetch() 并在 head() 中设置值？答案

【问题标题】：Is it possible to use nuxt fetch() and set the values in head()?是否可以使用 nuxt fetch() 并在 head() 中设置值？
【发布时间】：2022-11-11 09:09:19
【问题描述】：

问题是 head() 似乎在 async fetch() 之前执行，这在尝试插入页面的元数据和标题时会导致错误。我知道 asyncData 存在，但它在路由转换级别阻止页面加载的事实使它提供了如此糟糕的用户体验（在连接不良的移动设备中，页面转换可能会被阻止几秒钟）并提醒旧的 PHP 渲染网站，而不是现代SPA。另一方面，Nuxt fetch() 虽然仍然是服务器端渲染页面，但会暴露$fetchState.pending 并可以展示显示页面骨架的即时页面转换（从而使用户体验更好）。我遇到的唯一问题是这个带有 head() 数据的问题。这个问题是可以解决的，还是只是使用 fetch() 而不是 asyncData() 的一个无法解决的缺点？

重要提示：我指的是 Nuxt 的新 fetch 方法，而不是旧的。

不起作用的示例代码：

data() {
  return {
    car: null,
  }
},
async fetch() {
  this.car = await this.$axios.$get('/cars/' + this.$route.params.id)
},

head() {
    return {
      title: this.car.name,
    }
  },

【问题讨论】：

在您的示例中，您使用的是旧版。我不确定这是否可行，因为fetch() 可以在页面和组件上使用。所以，我不确定如何为Button.vue 定义head 会起作用。它适用于页面看起来是合法的。另外，不确定这是否可行？ github.com/ihavecoke/nuxt-seo-meta 从未尝试过。
您总是可以静态设置它，或者以后以某种方式完成它。
你是对的。我提供的代码 sn-p 使用的是旧代码。我编辑了这个问题。我正在尝试在页面级别设置数据。我会看看你的链接。谢谢

标签： vue.js nuxt.js

【解决方案1】：

几周前我的同事做了一个演讲，谈到了一般的 SEO，这里是相关部分：https://youtu.be/W9camkXNjkw?t=920

查看我给出的关于 SEO 和 Github 问题的所有答案，所有示例都使用asyncData 或一些静态方法。
当您考虑它时，我不确定您如何在 SSR 上生成一些东西，同时完全动态 + 非阻塞。

要么你提前知道它并且可以生成 OG 标签，要么你不知道它是否完全不稳定。

【讨论】：

但是新的 fetch 方法不兼容 SSR 吗？如 nuxt 文档中所述：“Nuxt v2.12 引入了一个名为 fetch 的新钩子，您可以在任何 Vue 组件中使用它。每次需要获取异步数据时使用 fetch。渲染路由时在服务器端调用 fetch ，并且在导航时在客户端。”
@Kos-Mos 如果您在服务器上有它，它将在初始加载期间。随后的导航在客户端完成。最简单的方法是确定 nuxt.config.js 文件中的 ssr 和 target 值，并在禁用 JS 的情况下对其进行调试：查看它是否真的在服务器上正确呈现。