server-side-rendering - 努克特 : How to add content/scripts to the head dynamically on server side

Question

如何在服务器端的 Nuxt 中向头部动态添加内容？

我试图在这里重写这个只支持静态 id 的模块:https://github.com/nuxt-community/modules/blob/master/packages/google-tag-manager/index.js

(我的 id 来自商店(商店正在从休息电话中获取 id))

这是将内容添加到头部的功能:

export default function addheadcode(head, id) {
  const options = {
    id: id,
    layer: 'dataLayer',
    pageTracking: true,
    pageViewEventName: 'nuxtRoute',
    respectDoNotTrack: false,
    query: {},
    scriptURL: '//www.googletagmanager.com/gtm.js',
    noscriptURL: '//www.googletagmanager.com/ns.html',
    env: {} // env is supported for backward compability and is alias of query
  }

  const queryParams = Object.assign({}, options.env, options.query)

  queryParams.id = options.id

  if (options.layer) {
    queryParams.l = options.layer
  }

  const queryString = Object.keys(queryParams)
    .filter(key => queryParams[key] !== null && queryParams[key] !== undefined)
    .map(
      key =>
        `${encodeURIComponent(key)}=${encodeURIComponent(queryParams[key])}`
    )
    .join('&')

  head = head || {}
  head.noscript = head.noscript || []
  head.script = head.script || []

  head.script.push({
    hid: 'gtm',
    src:
      (options.scriptURL || '//www.googletagmanager.com/gtm.js') +
      '?' +
      queryString,
    async: true
  })

  head.noscript.push({
    hid: 'gtm-noscript',
    innerHTML: `<iframe src="${options.noscriptURL}?${queryString}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
    pbody: true
  })

  head.__dangerouslyDisableSanitizersByTagID =
    head.__dangerouslyDisableSanitizersByTagID || {}
  head.__dangerouslyDisableSanitizersByTagID['gtm-noscript'] = ['innerHTML']
}

这是我的中间件，我只在服务器端执行
/middleware/gtm.js

import gtmAddheadcode from '~/src/googletagmanager.js'

export default function({ store, app }) {
  if (process.server) {
    const gtmID = store.getters['websiteskeleton/googelTagManagerId']
    gtmAddheadcode(app.head, gtmID)
  }
}

问题:
在第一次通话时，它似乎工作正常。这是我可以在客户端看到的输出:

<script data-n-head="true" src="//www.googletagmanager.com/gtm.js?id=GTM-P4FZ3XX&amp;l=dataLayer" async="true"></script><noscript data-n-head="true" data-hid="gtm-noscript" pbody="true"><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXX&l=dataLayer" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

如果我刷新该页面。我看到相同的内容加倍。如果我再次刷新它，我会看到它是三倍的。

1) 为什么 Nuxt 会保存应用程序的这种状态？

2)我能做些什么来解决这个问题？

编辑:
我用代码创建了一个 git 存储库。该问题仅在生产模式下出现!运行 dev 时看不到它。
Example repository

编辑2:
这是一个错误，将被修复:https://github.com/nuxt/nuxt.js/issues/6786#event-2893743506

Answer 1

要回答您的问题:

1.

这确实听起来像是某个地方的错误。 Nuxt 不应该像这样跨请求保存状态。这对我来说似乎是一个大问题，只需省略 hid 就很容易在您的应用程序中导致内存泄漏。 .我建议在 Nuxt github 页面上打开一个问题来解决这个问题。

我有根据的猜测是 Nuxt 可能会保持 vue-meta 的状态。 ，用于使用 head 的库标签，并假设用户将使用 hid在需要时替换它们的元素。

2.

我唯一的建议是添加 hid到您的脚本对象，将其命名为“gtag”之类的常见名称。

  head.script.push({
    hid: 'gtag',
    src:
      (options.scriptURL || '//www.googletagmanager.com/gtm.js') +
      '?' +
      queryString,
    async: true
  })