Question

我正在一个基于盖茨比的网站上工作，到目前为止，该网站的开发进展顺利。尽管在构建生产版本时遇到了问题，即我们在各种页面索引文件中都没有得到任何静态html，而Gatsby似乎正试图从javascript中注入页面，这与我们的预期相反。

我看到了一些与Gatsby脱机插件相关的帖子，但我已将其禁用，但这无法解决问题。我们的页面不包含任何静态html输出，并且我期望react-helmet注入的meta内容也不存在。

是否有关于如何调试版本的建议，以查看重置静态输出并将其替换为动态生成的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,
      },
    },
  ]

提前感谢任何指针

Answer 1

我设法将问题归结为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，可以通过创建一个不依赖的ReduxWrapper来解决。假设这称为ReduxSSRWrapper，则gatsby-ssr将更改为：

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

和ReduxSSRWrapper将包含以下内容，基本上是删除了PersistGate：

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

Answer 2

有同样的问题。

似乎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>
  )
}

Gatsby无法生成正确的静态HTML文件

2 个答案: