Gatsby 没有生成正确的静态 HTML 文件答案

【问题标题】：Gatsby not generating correct static HTML filesGatsby 没有生成正确的静态 HTML 文件
【发布时间】：2019-10-04 14:39:20
【问题描述】：

我正在开发一个基于 Gatsby 的网站，该网站目前进展顺利。但是在为生产构建时遇到了一个问题，即我们没有在各种页面索引文件中获得任何静态 html，而是看起来 Gatsby 将尝试从 javascript 注入页面，这与我们的预期相反。

我看到了一些与 Gatsby 离线插件相关的帖子，我已经禁用了这些帖子，但这并没有解决问题。我们的页面不包含静态 html 输出，并且我希望 react-helmet 注入的元内容也不存在。

是否有关于如何调试构建以查看可能重置静态输出并用动态生成的 Gatsby 引导代码替换它的建议。

网站使用的插件有：

 plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/favicon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: 'data',
        path: `${__dirname}/src/data/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-plugin-styled-components`,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    //`gatsby-plugin-offline`,
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        src: path.join(__dirname, 'src'),
        pages: path.join(__dirname, 'src/pages'),
        images: path.join(__dirname, 'src/images'),
      },
    },
    `gatsby-plugin-transition-link`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS_TRACKING_ID,
        head: true,
      },
    },
  ]

提前感谢您的任何指点

【问题讨论】：

你能扩展contra to our expectation吗？
Gatsby 应该生成静态版本的页面。例如，如果我有一个将呈现为
About

一堆内容
的 about 页面，那么该原始标记应该出现在关联的 /about/index.html 文件中我运行了一个 Gatsby 构建。这不会发生，构建生成文件中唯一的 html 元素是顶级
此外，我们期望通过 react 头盔注入的任何 SEO 元内容都不存在。
你是gatsby clean + gatsby build + gatsby serve吗？ gatsby develop 并不总是创建您使用gatsby build 看到的所有页面部分。如果您没有看到 React 头盔元标记，我认为配置有误。当我gatsby build 时，我在我的项目中看到了它们。
这是我们问题的症结所在，Gatsby 构建不会生成包含静态 html 或元标记的页面。该网站在开发中工作，甚至来自 Gatsby 服务，但没有我们 SEO 所需的完全水合页面，我们无法确定已安装插件或配置的中断
遇到同样的问题。你有什么发现吗？

标签： reactjs gatsby

【解决方案1】：

遇到同样的问题。

PersistGate 似乎破坏了 ssr。由于 ssr 是在构建期间完成的，我们不需要它，我们可以检查我们的环境。

将 wrap-with-provider.js 从 1. 更改为 2. 成功了

import React from "react"
import { Provider } from "react-redux"
import { PersistGate } from 'redux-persist/integration/react'

import {store, persistor} from "./src/redux/store"

1：

export default ({ element }) => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      {element}
    </PersistGate>
  </Provider>
)

2：

export default ({ element }) => {
  if (typeof window === "undefined") {
    return (
      <Provider store={store}>
        {element}
      </Provider>
    )
  }
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {element}
      </PersistGate>
    </Provider>
  )
}

【讨论】：

使用此解决方案时出现重复内容？

【解决方案2】：

我设法将问题归结为 Redux (redux-persist) 和 Gatsby SSR 之间的冲突——特别是与 PersistGate 元素的使用有关。以下是一个非常常见的模式，您在 gatsby-browser 和 gatsby-ssr 中有以下内容

export { default as wrapRootElement } from 'src/store/ReduxWrapper';

哪个 ReduxWrapper 将包含以下内容：

export default ({ element }) => (
  <Provider store={store}>
    <PersistGate loading={<h2>Loading...</h2>} persistor={persistor}>
      {element}
    </PersistGate>
  </Provider>
);

不幸的是，这破坏了 SSR，可以通过创建不依赖于 .假设这被称为 ReduxSSRWrapper 那么 gatsby-ssr 将被更改为：

export { default as wrapRootElement } from 'src/store/ReduxSSRWrapper';

ReduxSSRWrapper 将包含以下内容，这基本上是对 PersistGate 的删除：

export default ({ element }) => (
  <Provider store={store}>
    {element}
  </Provider>
);

【讨论】：

About