异步获取数据时初始浏览器重新呈现

Question

我正在尝试构建一个使用 "react-router"、"redux" 和服务器端渲染的 React app/site，但我不太了解如何处理初始渲染在浏览器中。

在服务器端，我可以获取一个 JSON 对象，将其传递给状态，然后将状态映射到道具 - 所有这些都是同步的 - 最后使用已经初始化的道具渲染组件。

const routes = <Router>
<Route path='/' component={ViewComposite} 
  onEnter={ ({params}) => { store.dispatch(setViewProps(props)); }} />
<Route path='/admin' component={AdminComposite} 
  onEnter={ ({params}) => { store.dispatch(setAdminProps(props)); }} />
</Router>;

但是，当浏览器开始运行时，我需要通过 AJAX 请求异步获取数据：

window.onload = function() {
const store = createStore(viewPropsReducer);

ReactDOM.render(
    <Provider store={store} >
        <Router history={browserHistory} >
            <Route path="/" component={ViewComposite} 
 onEnter={ ({params}) => {store.dispatch(fetchViewData()); }} />
            <Route path='/admin' component={AdminComposite} 
 onEnter={ ({params}) => {store.dispatch(fetchAdminData()); }} />
        </Router>
    </Provider>,
    document.getElementById('viewMount')
);}

因此，由于未定义的道具，渲染失败。有没有办法解决这个问题 - 也许推迟浏览器渲染直到数据被获取？

Answer 1

您可以将 json 负载添加到呈现的服务器 html。

<script> 
    window.payload = <json>
 </script>

如果您的状态是可序列化的，我想您可以将状态放在那里，并在创建商店时将其作为 initialState 传递。

createStore(reducer, window.initialState);

异步获取数据时初始浏览器重新呈现

Initial browser re-rendering when fetching data asynchronously

reactjs

react-router

redux

server-side-rendering