我有一个使用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
时是否可以实现此功能?
或者它只在浏览器上触发?
非常感谢任何帮助! 谢谢
最佳答案
我不明白 - 我假设 getUser 是异步的,在 React 中渲染始终是同步的。你必须提前获取数据。依赖 onEnter
是个好主意,但行不通。
基本上...
首先:您需要公开获取数据的方法,以便可以在 Flux 之外的服务器上调用它们。操作/调度程序/存储在请求/响应周期上运行不佳,请确保您有一个包含 API 调用的文件。
第二:将所有路由放入 JSON 文件中,React Router(或任何路由器)读取该 JSON 并使用其处理程序将路由添加到循环中,服务器端代码读取这些路由并为其添加快速路由指向该方法的路由,JSON 中的每个路由还包含对组件实际初始渲染(异步调用的内容)所需的数据的引用。您创建初始状态对象的空副本,express 端的每个处理程序执行对相关 API 方法(来自 JSON)的所有调用,并且当 Promise.all
解析“获取数据”时并将其填充到状态中”解析您的渲染,
渲染现在包含相关数据。
第三,你需要弄清楚如何将状态传递给服务器,用户如何登录,他们可以做什么等等 - 我建议让第二个服务器充当缓存,因为在 React 中渲染是 CPU 绑定(bind)的所以你需要缓存。我们根据路线、用户状态、设备和其他一些基本信息进行缓存。
第四,将非渲染服务器(缓存服务器)指向渲染服务器并转发请求,希望请求能够命中缓存,您需要让非渲染服务器“回退”到客户端渲染仅当渲染服务器发生故障时。这还允许您在部署时“热交换”渲染服务器。
您还需要某种方式从渲染服务器传递 JavaScript 本身(因此存在单一事实来源),这应该不是什么大问题。
流程中有很多更微妙的部分 - 但这几乎就是我们的做法,并且我们有亚秒级的完整渲染,我认为这很好。当我们的网站主要是 Angular 并在客户端上呈现时,时间从 5 秒下降了。
关于node.js - redux onEnter 调度可以在服务器渲染上工作吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35204059/