redux onEnter 调度可以在服务器渲染上工作吗？

Question

我有一个使用 redux-router 的客户端应用程序。 我从我的 api 发送 user 页面的初始状态。

我的路线文件：

export default function ({ dispatch, getState }) {
    function getUser(nextState, replaceState) {
        dispatch(getUserData(nextState.params.id));
    }

    return (
        <Route path="/" component={App}>
            <Route path="user/:id" component={User} onEnter={getUser}/>
                <Route path="*" component={NoMatch}/>
            </Route>
        );
    }
}

所以在客户端上效果很好。 在getUserData 调度返回数据后，我想将我的标记呈现为字符串。

这就是我的服务器匹配和渲染（来自官方服务器渲染示例）：

app.use((req, res) => {
    const store = reduxReactRouter({ routes, createHistory: createMemoryHistory })(createStore)(reducer);
    const query = qs.stringify(req.query);
    const url = req.path + (query.length ? '?' + query : '');

    store.dispatch(match(url, (error, redirectLocation, routerState) => {
        if (error) {
            console.error('Router error:', error);
            res.status(500).send(error.message);
        } else if (redirectLocation) {
            res.redirect(302, redirectLocation.pathname + redirectLocation.search);
        } else if (!routerState) {
            res.status(400).send('Not Found');
        } else {
            res.status(200).send(getMarkup(store));
        }
    }));
});

是否可以在使用onEnter 时使其正常工作？ 还是只在浏览器上触发？

将不胜感激任何帮助家伙！ 谢谢

Answer 1

我不明白 - 我假设 getUser 是异步的，渲染在 React 中总是同步的。您必须提前获取数据。依赖onEnter 是个好主意，但不会奏效。

基本上...

首先：您需要公开获取数据的方法，以便可以在 Flux 之外的服务器上调用它们。 action/dispatcher/store 在请求/响应周期上不能很好地工作，并确保您有一个包含 API 调用的文件。

第二步：将所有路由放入 JSON 文件中，React Router（或任何路由器）读取该 JSON 并使用其处理程序将路由添加到循环中，服务器端代码读取这些路由并为其添加快速路由指向方法的路由，JSON 中的每个路由还包含对组件需要的数据的引用，以进行 real 初始渲染（异步调用的内容）。您创建初始状态对象的空副本，快递端的每个处理程序都会执行对相关 API 方法的所有调用（来自 JSON），当 Promise.all 解析为“获取数据并将其填充到状态”时解析你渲染，

渲染现在包含相关数据。

第三，你需要弄清楚如何将状态传递给服务器，用户如何登录，他们可以做什么等等 - 我建议让第二个服务器充当缓存，因为在 React 中渲染是 CPU 绑定的所以你需要缓存。我们缓存基于路由、用户状态、设备和其他一些基本的东西。

第四，您将非渲染服务器（缓存服务器）指向渲染服务器并转发请求，希望请求应该命中缓存，您需要让非渲染服务器“回退”到客户端渲染仅当渲染服务器失败时。这还允许您在部署时“热交换”渲染服务器。

您还需要某种方式从渲染服务器交付 JavaScript 本身（因此存在单一事实来源），这应该不是太大的问题。

流程中有很多更精细的部分 - 但这就是我们的工作方式，我们有亚秒级的完整渲染，我认为这很好。当我们的网站主要是 Angular 并在客户端上呈现时，从 5 秒开始下降。