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

Question

我有一个使用redux-router的工作客户端应用程序。 我从我的 api 分派(dispatch) 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 之外的服务器上调用它们。操作/调度程序/存储在请求/响应周期上运行不佳，请确保您有一个包含 API 调用的文件。

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

渲染现在包含相关数据。

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

第四，将非渲染服务器(缓存服务器)指向渲染服务器并转发请求，希望请求能够命中缓存，您需要让非渲染服务器“回退”到客户端渲染仅当渲染服务器发生故障时。这还允许您在部署时“热交换”渲染服务器。

您还需要某种方式从渲染服务器传递 JavaScript 本身(因此存在单一事实来源)，这应该不是什么大问题。

流程中有很多更微妙的部分 - 但这几乎就是我们的做法，并且我们有亚秒级的完整渲染，我认为这很好。当我们的网站主要是 Angular 并在客户端上呈现时，时间从 5 秒下降了。