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

【问题标题】：gatsby ssr - add script to header before other pluginsgatsby ssr - 在其他插件之前将脚本添加到标题
【发布时间】：2020-09-22 02:03:10
【问题描述】：

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

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

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

它是最后添加的。

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

【问题讨论】：

标签： reactjs gatsby

【解决方案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。

【讨论】：

我使用了第一个答案，但是如果我使用不同的插件并且必须控制顺序，这绝对是少数..

【解决方案2】：

如果可以使用<Helmet> 标签，为什么要使用gatsby-ssr.js 文件，也许它适合你。你只需要在任何组件中像这样使用它：

import React from "react"
import Helmet from "react-helmet"

import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage= () => (
    <Layout>
      <SEO title="Index page" />
      <Helmet>
        <script src="https://whatever.com" type="text/javascript"/>
        <script src="https://whatever2.com" type="text/javascript"/>
      </Helmet>
    </Layout>
)

export default IndexPage

上面的 sn-p 将按照您放置它的顺序将您的脚本加载到 <head> 标签内。

如果您需要某种排序和异步方法，您可以使用gatsby-ssr，跨越onRenderBody 和onPreRenderHTML。

【讨论】：