Гэтсби не генерирует правильные статические файлы HTML

Question

Я работаю над сайтом в Гэтсби, который до сих пор успешно развивается. Однако при сборке для производства возникает проблема, из-за которой мы не получаем никакого статического html-файла в различных индексных файлах страниц, и вместо этого похоже, что Гэтсби попытается внедрить страницу из javascript, что противоречит нашим ожиданиям.

Я видел несколько сообщений, связанных с автономным плагином Gatsby, которые я отключил, но это не решило проблему. На наших страницах нет статического вывода html, и мета-контент, который я ожидаю добавить в реагирующий шлем, также отсутствует.

Существуют ли рекомендации по отладке сборки, чтобы увидеть, что может сбрасывать статический вывод изаменив его динамически генерируемым кодом начальной загрузки 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>
);