gatsby ssr - 在其他插件之前将脚本添加到标头

Question

我正在使用 Gatsby，需要在其他插件之前在标头中添加一个脚本。

如果我通过添加它gatsby-ssr.js

exports.onRenderBody = ({ setHeadComponents }) => setHeadComponents([#MY-SCRIPT#]);

它是最后添加的。

如何在其他插件之前添加它？

Answer 1

除了 之外onRenderBody，还可以使用onPreRenderHTML对脚本重新排序。

exports.onRenderBody = ({ setHeadComponents }) =>
  setHeadComponents([
    <script key='myscript' src='...' />
  ]);

exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  const headComponents = getHeadComponents()

  // reorder your array with the sort method, by putting your item at top
  const orderedComponents = headComponents.sort((item) => (item.key === 'your-key' ? -1 : 1));  const orderedComponents = reorder(headComponents)
  replaceHeadComponents(orderedComponents)
}

有关更多信息，请参阅有关 SSR API 的 Gatsby 文档。