服务端渲染 React Router + Redux 在进入路由时加载数据

Question

我正在使用带有 Redux 的 React Router 和服务器渲染。 我有一个将从远程 api 获取数据的组件，所以在进行服务器端渲染时，我需要等待在服务器端加载

我用过这个解决方案

https://github.com/bananaoomarang/isomorphic-redux

server.jsx

    ... after matching route, creating storage etc. wait for all needed promises completed ...

     fetchComponentData(store.dispatch, renderProps.components, renderProps.params)
      .then(renderView)

shared/lib/fetchComponentData.jsx

export default function fetchComponentData(dispatch, components, params) {
  const needs = components.reduce( (prev, current) => {

    return current ? (current.needs || []).concat(prev) : prev;
  }, []);

  const promises = needs.map(need => dispatch(need(params)));

  return Promise.all(promises);
}

我自己写的组件是

export default class ListComponent extends React.Component {
    static needs = [
        loadSomeData
    ]

    render() {
        return (
            <div>

            </div>
        );
    }
}

我的 routes.js 是

export default (store) => {


return (<div>
    <Route path='/'>
        <IndexRoute component={AnotherComponent}/>
        <Route path="component" component={Component}/>
    </Route>
</div>);
};

所以，流程运行良好。

1) 我通过在浏览器中输入来转到 /component

2) Server.js 调用 fetchComponentData

3) fetchComponentData 判断组件在渲染前需要加载数据，用promise调度action

4) 等待完成的承诺

5) 渲染组件并将其作为 html 提供

但是有一个问题。当我通过调用 browserHistory.push('/component') 从另一个组件转到组件时，根本没有加载数据

我尝试通过以这种方式修改 routes.js 来决定这一点

export default (store) => {

const loadData = (nextState, replace, cb) => {
    store.dispatch(loadSomeData());
    cb();
};


return (<div>
    <Route path='/'>
        <IndexRoute component={AnotherComponent}/>
        <Route path="component" component={Component} onEnter={loadData}/>
    </Route>
</div>);
}; 

但是我有另一个问题服务器给我渲染的 html 和客户端再次调用 loadData

所以我的问题是如何避免在客户端第一次在客户端渲染时调用 onEnter？

感谢您的回答！

Answer 1

我建议这里的问题受到在客户端和服务器端调用 routes.js 的影响。简而言之： 1）应该有2个功能：bootstrapServer和bootstrapClient 2）如果我正确地意识到你，bootstrapServer 工作得很好：你将 url 与你的请求 url 中的页面匹配，为其调度数据并呈现； 3) bootstrapClient 应该包含带有 onEnter 的routes.js - 它只能在客户端调用

所以显着的区别是routes.js 必须只在客户端实现。