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

Question

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

如果我通过 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)
}

欲了解更多信息，see the Gatsby docs on SSR API .