NodeJS服務器端在本地工作，但不在Heroku上工作

Question

我想知道是否有人在創建服務器端渲染NodeJS應用程序時遇到問題，該應用程序在本地可以完美運行，但是一旦部署到heroku后就不會加載服務器端。

我使用Jared Palmer的超棒RazzleJS結合Redux，React Router和React Router Config創建了一個應用程序。

它的工作方式是，在我的server.js文件中，我檢查了正在加載的組件中是否有一個名為fetchData的靜態函數，如果該函數存在，則該函數將運行，這是基於thunk的axios對API的基於承諾的請求。

在我的server.js文件中，然后運行另一個函數，該函數在最終呈現頁面的HTML之前檢查所有Promise是否已完成。

在本地這是完美的，即使禁用了Javascript，頁面也會加載完整的數據。

已經將其部署到heroku（單個dyno-業余愛好計划），但是，如果我禁用了javascript，頁面正在加載而數據丟失，這表明該頁面在promise解決之前就已呈現。 然后，使用等效的ComponentDidMount分派為數據正確加載數據。

我目前有以下代碼：

Server.js

function handleRender(req, res) {
  const sheet = new ServerStyleSheet();

  const store = createStore(rootReducer, compose(applyMiddleware(thunk)));

  const branch = matchRoutes(Routes, req.url);
  const promises = branch.map(({ route }) => {
    let fetchData = route.component.fetchData;

    return fetchData instanceof Function
      ? fetchData(store, req.url)
      : Promise.resolve(null);
  });

  return Promise.all(promises).then(() => {      
    const context = {};
    const html = renderToString(
      sheet.collectStyles(
        <Provider store={store}>
          <StaticRouter context={context} location={req.url}>
            {renderRoutes(Routes)}
          </StaticRouter>
        </Provider>
      )
    );

    const helmet = Helmet.renderStatic();
    const styleTags = sheet.getStyleTags();
    const preloadedState = store.getState();

    if (context.url) {      
      res.redirect(context.url);
    } else {      
      res
        .status(200)
        .send(renderFullPage(html, preloadedState, styleTags, helmet));
    }
  });
}

示例React組件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchProductData } from '../thunks/product-data';

class Test extends Component {
  static fetchData(store, url) {
    store.dispatch(fetchProductData());
  }

  componentDidMount() {
    if(this.props.productData.length === 0 ) {
      this.props.fetchProductData() // Successfully fetches the data
    }
  }

  render() {
    return (
      <div>
        { this.props.productData && this.props.productData.map( (product, i)  => {
          return <div key={i}>{product.title}</div>
        })}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    productData: state.productData
  }
};

const mapDispatchToProps = dispatch => {
  return {
    fetchProductData(){
      dispatch(fetchProductData());
    }
  }
};

export const TestContainer = connect(mapStateToProps, mapDispatchToProps)(Test);

這只是組件布局的一個示例，因為我實際擁有的組件非常復雜，但是在這種情況下， productData將在defaultState中設置為[] 。

同樣，所有的reducer和action在本地都無法正常工作，只是只有按照業余計划將其部署到Heroku時，服務器端渲染才似乎不再起作用？

Answer 1

因此，經過一整天的研究，之所以無法在我的實時環境中工作，是因為我有一個用於跟蹤分析的HOC包裝組件。

但是React-router-config無法處理fetchData函數是層次結構中更深一層的事實，因此我的所有諾言都用null進行了解析。

現在，我再次刪除了HOC組件，服務器端渲染再次正常工作:)